当改变时,React不会重新渲染state.array.map()

我正在输入可以预可视化的多个图像。

To handle multiple images I put them in an array of the component's state, and map the previsualized images, but when I select the images from the input and set the state, this.setState({imgArray: newArray}), this.state.array.map(image=><img src={image}/>) doesn't re-render

代码示例:

export default class posts extends Component {
    state = {
        fotos: ["/iconos/img.svg"] //If there are not img selected, it renders one image icon
    }
    onUploadVarious = e=>{
        let newArray = []
        Object.values(e.target.files).map(file=>{
            let nuevo = new FileReader()                                                
            nuevo.onload = event=> newArray.push(event.target.result)
            nuevo.readAsDataURL(file)}
        )
        this.setState({fotos: newArray}) //the state is set correctly
    }

渲染:

<div className=" border rounded" style={{"height":"30%", "overflow":"auto"}}>
    {this.state.fotos.map(foto=>
    <img src={foto||"/iconos/img.svg"}
    id="arch-preview"/>)} //it doesn't re-render when fotos state is changed
</div>

//input
<div className="mt-auto">
    <input multiple="multiple" type="file" 
    onChange={this.onUploadVarious} 
    className="form-control-file" name="file" />
</div>
评论