回调不会更新状态

Question

The below function handle uploaded files, for some reason the setFiles doesn't update the files list after the callback ends so it causes the previous uploaded file to show up on the page, for example the user uploaded an image 1.jpg , nothing will show up on the page, next the user uploads a second file- now the first image 1.jpg will show up, and so on.

On setFiles the state is correct and updated but the return doesn't update the files state.

Any idea why?

  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

You are mutating state without creating a new reference for it, so React skips the update as the shallow comparison indicates that they are the same object. Use this pattern instead.

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