為什么我必須將 function 傳遞給 React 中“useState”的設置器 function？

Question

我正在使用react-dropzone處理文件上傳，它使用文件列表調用以下 function ：

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

    const onDrop = useCallback(async acceptedFiles => {
        uploadFiles(acceptedFiles)
    }, [])

然后我使用 fetch 上傳文件：

    const uploadFiles = async acceptedFiles => {
        acceptedFiles.forEach(async (file) => {
            setFiles(array => [...array, fileState])

            await fetch('/upload', {
                method: 'POST',
                body: data
            }).then(res => {
                // etc
            })
        })
    }

如果我只用setFiles([...files, fileState]) （不在函數中）替換setFiles調用，它會中斷，但這是為什么呢？

Answer 1

我相信我能夠重現您遇到的問題。 https://codesandbox.io/s/elegant-bouman-9lb5k?file=/src/App.js

以下是相關代碼：

  const [files, setFiles] = useState(["file1", "file2"]);

  const uploadFiles = async (acceptedFiles) => {
    acceptedFiles.forEach(async (file) => {
      //setFiles([...files, file]);
      setFiles(array => [...array, file])

      await fetch("https://httpstat.us/200");
    });
  };

  const testFunc = async (acceptedFiles) => {
    uploadFiles(["file3", "file4"]);
  };

如果像上面那樣調用時行為符合預期，但如果您交換setFiles調用，則只會附加file4 。

該問題似乎與 React 批處理 setState 調用有關，因為它們是連續進行的。 這篇文章提供了我能找到的最佳答案。

因此，當您使用回調調用 setFiles 時，React 不會批處理這些請求，因此會一個接一個地執行它們。