如何在 setState 中执行箭头函数时追加到先前的状态数组？

Question

我试图在将图像拖放到 React-Dropzone 库时将文件附加到以前的文件状态。

 const [files, setFiles] = useState([])

...
const { 
        getRootProps, 
        getInputProps,
        isFocused,
        isDragAccept,
        isDragReject, 
    } = useDropzone({
        accept: "image/*",
        onDrop: (acceptedFiles) => {
           setFiles(acceptedFiles.map((file) => Object.assign(file, {
                preview: URL.createObjectURL(file)
            })))
        }
    })

在“onDrop”中，我映射接受的文件并使用 setFiles 附加新数组。但是，使用它会重置整个阵列，并且以前的图像会丢失。我想附加图像。我试过：

setFiles([...files, acceptedFiles.map((file) => Object.assign(file, {
                preview: URL.createObjectURL(file)
            }))])

但是这个 returns 什么都没有，也没有给我任何图像。

Answer 1

在 React 状态下附加到数组时，使用 useState 的 functional update form 会非常方便——这只是一种奇特的说法，你将编写这样的箭头函数:

   setFiles((oldArrayofFiles) => {
     return [...oldArrayOfFiles, newFile];
   })

这也可以防止我认为您遇到的问题，因为您提供 onDrop 作为函数，所以您 关闭了 files 当它仍然是一个空数组时。所以在你的情况下（请原谅，我没有用 React-Dropzone 测试过）这个应该工作：

useDropzone({
  accept: "image/*",
  onDrop: (acceptedFiles) => {
    setFiles((previousFiles) => {
      const newFiles = acceptedFiles.map((file) => Object.assign(file, {
        preview: URL.createObjectURL(file)
      }));

      return [...previousFiles, ...newFiles];
    });
  });

我可能搞砸了一个或三个括号......但你明白了:-)

如何在 setState 中执行箭头函数时追加到先前的状态数组？

How to append to a previous state array while executing an arrow function inside setState?

javascript

reactjs

react-dropzone