在 React 中将多个图像推送到一个数组 - 我没有在图像数组中获取图像

Question

只要有 onChange 事件，我就会尝试将图像推送到数组，但它没有发生。有人可以提出原因吗？

    
    const [images, setImages] = useState([]);
    const [newImages, setNewImages] = useState([]);
    const imageHandler = (e) => {
          setNewImages(e.target.files[0])
          setImages([...images, newImages])
          console.log(images)
    }  
    const onSubmit = (event) => {
        event.preventDefault();
        const form data = new FormData();
        formdata. append('files', images)
            axios.post("",
           formdata,
           options
        ).then((response) => {
          alert("Form Submitted");
        })
      }
     
    <td><input type="file" name='Files' onChange={imageHandler} required/></td>

Answer 1

您的代码存在一些问题：

console.log(images) 在 setImages(...) 之后将不会给出正确的状态值，因为反应更新不是立即的。如果你想看到值更新，你可以添加一个 useEffect 挂钩
您不需要使用另一个数组来保存 newImages，只需附加到 images 数组

通过这些小修复，您可以看到一个有效的演示：

const { useState, useEffect } = React;

const ImgUploader = () => {
  const [images, setImages] = useState([]);
  const imageHandler = (e) => {
    setImages([...images, e.target.files[0]]);    
  };
  
  // This is called after values are updated
  useEffect(() => {
    console.clear();
    images.length && console.log(images);
  }, [images]);
  
  const onSubmit = (event) => {
    event.preventDefault();
    console.log("Images:", images);
    const formdata = new FormData();
    formdata.append("files", images);
    
    // Do more operations here
    
  };

  return (
    <form onSubmit={onSubmit}>
      <input type="file" name="Files" onChange={imageHandler} required />
      <br />
      <br />
      <input type="submit" name="Submit" />
    </form>
  );
};

ReactDOM.render(<ImgUploader />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

在 React 中将多个图像推送到一个数组 - 我没有在图像数组中获取图像

Pushing multiple Images to an Array In React - I am not getting the images inside images array

reactjs

react-redux

react-hooks