我已经与这段代码斗争了好几天了,但我仍然没有得到正确的结果。
问题:我正在使用具有拖放区的表单。在提交处理程序中,我需要将图像的 url 保存在数组中,但它总是作为空数组返回。
声明图像数组:
const [images, setImages] = useState([]);
Run Code Online (Sandbox Code Playgroud)
在这里,我获取图像的 url 并尝试将它们保存在数组中:
const handleSubmit = () => {
files.forEach(async(file)=> {
const bodyFormData = new FormData();
bodyFormData.append('image', file);
setLoadingUpload(true);
try {
const { data } = await Axios.post('/api/uploads', bodyFormData, {
headers: {
'Content-Type': 'multipart/form-data',
Authorization: `Bearer ${userInfo.token}`,
},
});
setImages([...images,data])
setLoadingUpload(false);
} catch (error) {
setErrorUpload(error.message);
setLoadingUpload(false);
}
})
}
Run Code Online (Sandbox Code Playgroud)
这里我有一个submitHandler函数,我在其中调用handleSubmit():
const submitHandler = (e) => {
e.preventDefault();
handleSubmit();
dispatch(
createCard(
name,
images,
)
);
}
Run Code Online (Sandbox Code Playgroud)
我知道这是因为它执行代码的顺序,但我找不到解决方案。提前非常感谢!!!!
我有这个:
{array.map((item) => (
<>
<input
key={item.id}
type="checkbox"
/>
<h3>{item.value}</h3>
</>
))}
Run Code Online (Sandbox Code Playgroud)
在网站上我看到警告:“警告:列表中的每个孩子都应该有一个唯一的“关键”道具。” 但我设置了“key”属性。有人知道为什么吗?