Hice un componente de clase para cargar images , todo está bien y ahora quiero cargarlo en el servidor a través de api , pero hay un problema, cuando selecciona la first imagen, parece que no funciona, debe llamar a la función handleUpload , pero parece this.state.images aún no se ha actualizado, cuando selecciona la segunda imagen, ahora llama a la función de carga. que he hecho mal? cómo hacer que this.state.images actualice para cargar.
class Hello extends React.Component { constructor() { super(); this.state = { image: [], //store real image files images: '', // base64 urlImage: [] // blob }; } handleImage = (e) => { let image = e.target.files; let array = []; let urlArray = []; let result = [...this.state.image, ...image]; this.setState({ image: result }) result.map(function(img, i) { let fileReader = new FileReader(); let blob = URL.createObjectURL(img); urlArray.push(blob); fileReader.readAsDataURL(img); fileReader.onload = () => { array.push(fileReader.result); } }) this.setState({ images: array, urlImage: urlArray }) this.handleUpload(); } handleUpload = ()=> { this.state.images && this.state.images.map(function (v, i){ let data = {image: v}; console.log(data); // this not working for first time // upload to api }) } render() { let real_this = this.state; let Images = this.state.urlImage; let ImageList = Images.map(function(Img, Row){ return ( <div key={Row}> <img alt="" className="img-thumbnail m-2" width="100" height="100" src={Img}/> </div> ) }) return <ul> <li> <input type="file" multiple={true} onChange={this.handleImage}/> </li> <li> {ImageList && ImageList} </li> </ul>; } } ReactDOM.render( <Hello name="World" />, document.getElementById('container') ); <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="container"></div>