回调不会更新状态

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