状态未设置，以及设置时不正确

Question

当我上传第一个图像时，没有任何内容写入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>
);
};

Answer 1

原来它正在更新formData，但console.log的更新速度不够快？我在每个onImageChange的顶部运行了一个console.log，你可以看到它在每次运行后都会以这种方式更新。超怪异

Answer 2

请改用setFormData(prev => ({ ...prev, [e.target.name]: e.target.value }));。