JavaScript — setState с использованием File onLoad

setState используя File onLoad

У меня проблемы с установкой состояния с onLoad FileReader . Цель состоит в том, чтобы отобразить несколько изображений и обновить состояние.

Я прочитал почти все сообщения от stackoverflow и изо всех сил старался ознакомиться с API File / FileReader. Тем не менее, когда я пытаюсь обновить свое состояние, React Developer Tools не имеет обновления состояния.

Я ожидаю увидеть две фотографии на своей странице и состояние моего photoList которое будет обновлено, однако оно не отображается.

 class App extends Component{ constructor() { super(); this.state = { photoList: [] }; } onSelectFile = event ={amp}gt; { event.preventDefault(); const { photoList } = this.state; const { imageFile } = event.target; for( let i = 0; i {amp}lt; imageFile; i  ){ let reader = new FileReader(); let file = imageFile[i] reader.onload = (e) ={amp}gt; { const { result } = e.target this.setState({ photoList: [...photoList, result] }) } reader.readAsDataURL(file) } } render() { const { photoList } = this.state; return ( {amp}lt;div{amp}gt; {amp}lt;input type="file" accept="image/jpeg, image/png" multiple onChange={this.onSelectFile} /{amp}gt; {amp}lt;img src={ photoList } alt="JavaScript - setState с использованием File onLoad"/{amp}gt; {amp}lt;/div{amp}gt; ); } } 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector