reactjs - 由于“此数组的顺序和大小必须保持不变”错误,无法更改数组的状态

每当我上传一组新文件时 React 都会引发以下错误:

警告:传递给 useEffect 的最后一个参数在渲染之间改变了大小。此数组的顺序和大小必须保持不变。上一篇:[]传入:[[object Object]]

这是我正在使用的代码:

export default function Files({ onChange }) {
    // Step #1: initially `files` is an empty Array
    const [files, setFiles] = useState([])

    useEffect(() => {
      // step #3: Notify the parent of the change
      // `files` could be empty or not at this pointt
      onChange(files)
    }, files)

    async function onFilesChange() {
      let newFiles = await getNewFiles(...arguments)
      
      // Step #2: Now `files` becomes a populated Array of any give size
      setFiles(newFiles)

      // setState is async so I cannot notify the parent 
      // of the change right away by calling onChange() below:
        
      // onChange(newFiles)

      // I need to rely on useEffect() instead (see step #3)
    }

    function onFilesRemoved() {
      // empty the `files` array and notify parent via `useEffect()`
      setFiles([])
    }

    return (
      <>
        <input type="file" multiple onChange={onFilesChange}/>
        <button onClick={onFilesRemoved}>remove files</button>
      </>
    )
}

这个错误对我没有意义。数组的大小必然会随着一次上传到下一次或用户选择删除所有文件而有所不同。

回答1

useEffect 钩子的第二个参数必须是一个依赖数组。

files 替换为 [files],它应该可以工作。