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

回调不会更新状态

1 个答案: