Reactjs 未设置的状态，以及不正确的状态

当我上传第一个图像时，没有任何内容写入formData，但是当我上传第二个图像时，它会上传到“image”值，然后第三个上传会写入“image2”值。好像一切都落后了。如果我忽略这一点，继续添加信息并最终提交“image2、image3、image4和image5”，则不会传递值

任何帮助都很重要。谢谢

    const [formData, setFormData] = useState({
        year: "",
        make: "",
        model: "",
        price: "",
        image: "",
        image2: "",
        image3: "",
        image4: "",
        image5: "",
        hull: "",
        title: "",
        details: ""
      });

      const {
        year,
        make,
        model,
        price,
        image,
        image2,
        image3,
        image4,
        image5,
        hull,
        title,
        details
      } = formData;

      const types = ["image/png", "image/jpeg"];
      const [file, setFile] = useState("");
      const [fileName, setFileName] = useState("");

    const onChange = e => {
            setFormData({ ...formData, [e.target.name]: e.target.value });
          };

          const onImageChange = async e => {
            e.persist();
            console.log(formData);
            const data = new FormData();
            let file = e.target.files[0];
            console.log(file);
            data.append("file", file);

            try {
              const res = await axios.post("/api/upload", data, {
                headers: {
                  "Content-Type": "multipart/form-data"
                }
              });

              const { fileName, filePath } = res.data;
              console.log(e.target.name);
              console.log(filePath);
              setFormData({ ...formData, [e.target.name]: res.data.filePath});


            } catch (err) {
              console.log("fileUpload Err");
              console.log(err);
            }
          };

          return (
            <div className="posts_area">
              <form
                className="post_form"
                onSubmit={e => {
                  e.preventDefault();
                  addPost({
                    year,
                    make,
                    model,
                    price,
                    image,
                    image2,
                    image3,
                    image4,
                    image5,
                    hull,
                    title,
                    details
                  });
                }}
              >
                <h5 className="create-post-title">Boat Year:</h5>
                <input
                  name="year"
                  value={year}
                  onChange={e => onChange(e)}
                  placeholder="Year"
                  className="create_post_fields"
                  required
                />
                <br />
                <br />

                <h5 className="create-post-title">Make:</h5>
                <input
                  name="make"
                  value={make}
                  onChange={e => onChange(e)}
                  placeholder="Make"
                  className="create_post_fields"
                  required
                />
                <br />
                <br />

                <h5 className="create-post-title">Model:</h5>
                <input
                  name="model"
                  value={model}
                  onChange={e => onChange(e)}
                  placeholder="Model"
                  className="create_post_fields"
                  required
                />
                <br />
                <br />

                <h5 className="create-post-title">Price:</h5>
                <input
                  name="price"
                  value={price}
                  onChange={e => onChange(e)}
                  placeholder="Price"
                  className="create_post_fields"
                  required
                />
                <br />
                <br />

                <h5 className="create-post-title">Hull Type:</h5>
                <input
                  name="hull"
                  value={hull}
                  onChange={e => onChange(e)}
                  placeholder="Hull Type"
                  className="create_post_fields"
                  required
                />
                <br />
                <br />

                <h5 className="create-post-title">Add a title to your post:</h5>
                <input
                  name="title"
                  value={title}
                  onChange={e => onChange(e)}
                  placeholder="Title"
                  className="create_post_fields"
                  required
                />
                <br />
                <br />

                <h5 className="create-post-title">Other Details:</h5>
                <textarea
                  placeholder="Ex. Has freshwater tank"
                  name="details"
                  onChange={e => onChange(e)}
                  className="create_post_fields"
                ></textarea>
                <br />
                <br />

                <h5 className="create-post-title">Upload Main Image</h5>
                <input type="file" name="image" onChange={ev => onImageChange(ev)} />
                <br />
                <br />

                <h5 className="create-post-title">Upload Secondary Images</h5>
                <input type="file" name="image2" onChange={ev => onImageChange(ev)} />
                <br />
                <br />

                <input type="file" name="image3" onChange={ev => onImageChange(ev)} />
                <br />
                <br />

                <input type="file" name="image4" onChange={ev => onImageChange(ev)} />
                <br />
                <br />

                <input type="file" name="image5" onChange={ev => onImageChange(ev)} />
                <br />
                <br />


                <input type="submit" value="Submit" className="submit_button" />
              </form>
            </div>
          );
        };

const[formData，setFormData]=useState({
年份：“，
制作：“，
型号：“，
价格：“，
图像：“”，
图2:“，
图3:“”，
图4:“”，
图5:“”，
船体：“，
标题：“，
详情：“
});
常数{
年，
制作
模型
价格，
形象,，
图2，
图3，
图4，
图5，
船体，
标题
细节
}=表格数据；
常量类型=[“图像/png”、“图像/jpeg”]；
const[file，setFile]=useState（“”）；
const[fileName，setFileName]=useState（“”）；
const onChange=e=>{
setFormData（{…formData，[e.target.name]：e.target.value}）；
};
常量onImageChange=async e=>{
e、 坚持（）；
console.log（formData）；
const data=新表单数据（）；
让file=e.target.files[0]；
console.log（文件）；
数据。追加（“文件”，文件）；
试一试{
const res=wait axios.post（“/api/upload”），数据{
标题：{
“内容类型”：“多部分/表单数据”
}
});
const{fileName，filePath}=res.data；
console.log（e.target.name）；
log（文件路径）；
setFormData（{…formData，[e.target.name]：res.data.filePath}）；
}捕捉（错误）{
log（“文件上传错误”）；
控制台日志（err）；
}
};
返回(
{
e、 预防默认值（）；
地址栏({
年，
制作
模型
价格，
形象,，
图2，
图3，
图4，
图5，
船体，
标题
细节
});
}}
>
船年：
onChange（e）}
占位符=“年”
className=“创建发布字段”
必修的
/>




制作：
onChange（e）}
占位符=“Make”
className=“创建发布字段”
必修的
/>




型号：
onChange（e）}
占位符=“模型”
className=“创建发布字段”
必修的
/>




价格：
onChange（e）}
占位符=“价格”
className=“创建发布字段”
必修的
/>




船体类型：
onChange（e）}
占位符=“外壳类型”
className=“创建发布字段”
必修的
/>




为您的帖子添加标题：
onChange（e）}
占位符=“标题”
className=“创建发布字段”
必修的
/>




其他详情：
onChange（e）}
className=“创建发布字段”
>




上传主图像
onImageChange（ev）}/>




上载次映像
onImageChange（ev）}/>




onImageChange（ev）}/>




onImageChange（ev）}/>




onImageChange（ev）}/>




);
};

试试

setFormData（prev=>（{…prev[e.target.name]：e.target.value}）。
原来它正在更新formData，但console.log的更新速度不够快？我在每次onImageChange的顶部运行了一个console.log，您可以看到它在每次运行后都会更新。超级怪异
如果我切换..prev和prev，它会更喜欢它，但我在以下位置出错：