小编pop*_*pop的帖子

在 React 中等待 useState

我已经与这段代码斗争了好几天了,但我仍然没有得到正确的结果。

问题:我正在使用具有拖放区的表单。在提交处理程序中,我需要将图像的 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)

我知道这是因为它执行代码的顺序,但我找不到解决方案。提前非常感谢!!!!

reactjs react-hooks use-state

10
推荐指数
1
解决办法
2万
查看次数

警告:列表中的每个子项都应该有一个唯一的“key”道具。有输入-反应

我有这个:

{array.map((item) => (
                <>
                    <input
                        key={item.id}
                        type="checkbox"
                    />
                    <h3>{item.value}</h3>
                </>
            ))}
Run Code Online (Sandbox Code Playgroud)

在网站上我看到警告:“警告:列表中的每个孩子都应该有一个唯一的“关键”道具。” 但我设置了“key”属性。有人知道为什么吗?

html javascript reactjs

3
推荐指数
1
解决办法
702
查看次数

标签 统计

reactjs ×2

html ×1

javascript ×1

react-hooks ×1

use-state ×1