javascript - 回调不更新状态

Question

以下函数处理上传的文件，由于某种原因，setFiles 在回调结束后不会更新 files 列表，因此会导致显示先前上传的文件在页面上，例如用户上传了图像 1.jpg，页面上不会显示任何内容，接下来用户上传第二个文件 - 现在是第一个图像 1.jpg 将显示，依此类推。

在 setFiles 上，状态正确并已更新，但 return 不会更新 files 状态。

知道为什么吗？

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

  const addFiles = addedFiles => {
    const newFiles = Array.from(addedFiles, file => newFileDecorator(file))
    setFiles([...files, ...newFiles])

    newFiles.forEach(file => {
      file.reader.onload = async () => {
        const dimensions = await getImageDimensions(file.reader.result)
        setFiles(state => {
          const index = state.findIndex(f => f.id === file.id)
          state[index].readyState = file.reader.readyState
          state[index].dimensions = dimensions
          return state
        })
      }

      file.reader.readAsDataURL(file.data)
    })
  }

Answer 1

您正在改变状态而不为其创建新的引用，因此 React 会跳过更新，因为浅比较表明它们是同一对象。请改用此模式。

       setFiles(state => {
          const file = state.find(f => f.id === file.id)
          file.readyState = file.reader.readyState
          file.dimensions = dimensions
          return [ ...state, file ]
        })