為什么在 Child 中沒有發生對 Parent 中 state 的 useEffect 更改？

Question

下面是一個 FileUploader 組件（父），它在添加文件時呈現 ProgressBar（子）。 我打算傳入 FileReader onprogress，以便進度條的寬度從 0 變為 100。為了測試，我制作了一個從 0 到 100 的 useEffect 計數器。我已確認計數器狀態正在由 console.logging 計數器更新在 useEffect 中，但是 ProgressBar 組件中的進度狀態並未更改，並且僅發送初始 0。如何將計數器狀態傳遞給 ProgressBar 子項，使其從 0 變為 100？

import { useState, useCallback, useEffect } from 'react'
import { useDropzone } from 'react-dropzone'

const ProgressBar = ({ exists, file, progress }) => {
  // only the first value, 0, of progress comes through, why not through 100?
  console.log(progress)
  return (
    <div className='progress-bar-component'>
      <div className='progress-bar-filename'>
        <span>{ file.name }</span>
      </div>
      <div className='progress-bar-group'>
        <div
          className={ `progress-bar${exists.length ? ' progress-bar-exists' : ''}` }
          style={ { width: `${progress}%` } }
        >
        </div>
        <div className='progress-bar-percent'>
          <span>{ exists.length ? 'Already uploaded' : `${progress}%` }</span>
        </div>
      </div>
    </div>
  )
}

const ProgressBars = ({ progressBars }) => {
  return (
    <div className='progress-bar-container'>
      {progressBars}
    </div>
  )
}

const FileUploader = () => {
  const [filesUploaded, setFilesUploaded] = useState([])
  const [progressBars, setProgressBars] = useState([])
  //
  const [counter, setCounter] = useState(0)
  const [start, setStart] = useState(false)
  useEffect(() => {
    if (start) {
      const timer = counter < 100 &&
      setInterval(() => {
        setCounter(counter + 1)
      }, 500)
      return () => clearInterval(timer)
    }
  }, [counter, start])
  //
  const onDrop = useCallback(acceptedFiles => {
    acceptedFiles.forEach(file => {
      const reader = new FileReader()

      reader.onloadstart = () => {
        return setFilesUploaded(filesUploaded => {
          return [...filesUploaded, file]
        })
      }
      reader.onabort = () => console.log('file reading was aborted')
      reader.onerror = () => console.log('file reading has failed')
      reader.onprogress = () => {
        setStart(true)
        return setProgressBars(progressBars => {
          return [
            ...progressBars,
            <ProgressBar
              key={progressBars.length}
              file={file}
              exists={filesUploaded}
              progress={counter}
            />
          ]
        })
      }
      reader.onload = () => {
        
      }
      reader.readAsArrayBuffer(file)
    })
    
  }, [filesUploaded, setStart, counter])

  const { getRootProps, getInputProps } = useDropzone({ onDrop, multiple: true })

  return (
    <div>
      <div className='file-uploader'>
        <div
          className='file-uploader-input'
          {...getRootProps()}
        >
          <input {...getInputProps()} />
          <p>Upload Files</p>
        </div>
      </div>
      <ProgressBars progressBars={progressBars} />
    </div>
  )
}

export default FileUploader

Answer 1

您在回調內部調用，並且 useEffect 不會影響該回調的呈現。 嘗試在回調外部調用，在父組件的返回部分

像這樣的東西：

 return ( <div> <div className='file-uploader'> <div className='file-uploader-input' {...getRootProps()} > <input {...getInputProps()} /> <p>Upload Files</p> </div> </div> <ProgressBar key={progressBars.length} file={file} exists={filesUploaded} progress={counter} /> <ProgressBars progressBars={progressBars} /> </div>