REACT, Axios, cloudinary push multiple secure_urls 到 Reactjs 中的状态数组

Question

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

州

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

DropZone

<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])
  };

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

REACT, Axios, cloudinary push multiple secure_urls 到 Reactjs 中的状态数组

REACT, Axios, cloudinary push mutliple secure_urls Into State Array In Reactjs

cloudinary

reactjs

axios

react-dropzone