我正在输入可以预可视化的多个图像。
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>