REACT，Axios，cloudinary 将多个安全 url 推送到 Reactjs 中的状态数组中

Question

我一直在尝试将 Cloudinary 数据响应中的 secure_urls 推送到 React 状态数组，但没有成功。当我将新图像添加到 dropzoneArea 时，以前的 url 会添加到数组中，因此会复制 url。 有谁知道如何解决这个问题？

状态

 const [fileItems, setFileItems] = useState([]);

放置区

<DropzoneArea
      acceptedFiles={["image/jpeg", "image/png", "image/bmp", "image/jpg"]}
      onChange={handleFiles}
      onDelete={handleDeleteFile}
      showFileNames
      filesLimit={5}
    />

const handleFiles = (files) => {
    files.forEach((file) => {
      const formData = new FormData();
      formData.append("file", file);

      formData.append("upload_preset", process.env.REACT_APP_UPLOAD_PRESET);

      return Axios.post(
        `https://api.cloudinary.com/v1_1/${process.env.REACT_APP_CLOUD_NAME}/upload`,
        formData,
        {
          headers: { "X-Requested-With": "XMLHttpRequest" },
        }
      )
        .then((res) => {
          const fileUrls = res.data.secure_url;
          setFileItems(fileItems=>[...fileItems,fileUrls])
        })
        .catch((err) => {
          console.log(err.message);
        });
    });
  };

Answer 1

我发现您的代码存在多个问题。对于初学者，您有一个带阴影的变量名，请参阅fileItems 的重复项

const [fileItems, setFileItems] = useState([]);
...
setFileItems(fileItems=>[...fileItems,fileUrls])

此外，在循环内调用 setState 是一种反模式。您可以尝试像这样重构您的代码：

const handleFiles = (files) => {
    const fileUrlArray = [];
    files.forEach((file) => {
      const formData = new FormData();
      formData.append("file", file);

      formData.append("upload_preset", process.env.REACT_APP_UPLOAD_PRESET);

      return Axios.post(
        `https://api.cloudinary.com/v1_1/${process.env.REACT_APP_CLOUD_NAME}/upload`,
        formData,
        {
          headers: { "X-Requested-With": "XMLHttpRequest" },
        }
      )
        .then((res) => {
          const fileUrls = res.data.secure_url;
          fileUrlArray.push(fileUrls);
        })
        .catch((err) => {
          console.log(err.message);
        });
    });
    setFileItems(prevState => [...prevState, ...fileUrlArray])
  };

不确定它是否会修复您的代码，但这是一个开始。