React中如何从传递给子组件的函数访问父组件的当前state？

这是典型的React闭包陷阱问题：removeFile函数在Form组件首次渲染时就捕获了当时的files状态（初始空数组），如果后续没有将更新后的removeFile正确传递给子组件，或子组件使用了React.memo优化，就会一直调用初始版本的removeFile，永远只能拿到挂载时的旧状态。此外你的代码还存在几处语法和逻辑错误，也会加重该问题。

• 核心解决方案：使用setState的函数式更新形式，规避闭包影响
  函数式更新的入参永远是当前最新的state值，不需要依赖外部files变量，自然不会出现旧状态问题，修正后的removeFile写法如下：

const removeFile = (key) => {
  setFiles(prevFiles => {
    // 这里的prevFiles永远是最新的文件列表，不存在旧状态问题
    return prevFiles.removeFileByKey(key);
  })
}

• 修正现有代码的语法/逻辑错误

1. Form组件内定义方法需要加const声明，传参给子组件时不要错误引用props.removeFile，直接传内部定义的removeFile即可
2. FileUploader的onClick不要直接执行removeFile，要用箭头函数包裹，避免渲染时直接触发删除逻辑

完整修正后代码如下：

function Form() {
  const [files, setFiles] = useState([]);

  const removeFile = (key) => {
    setFiles(prevFiles => {
      const updated_files = prevFiles.removeFileByKey(key);
      return updated_files;
    })
  }

  return (
    <div>
      {/* 其他表单输入项 */}
      <FileUploader files={files} setFiles={setFiles} removeFile={removeFile}/>
    </div>
  )
}

function FileUploader(props) {
  const onFileAdd = (more_files) => {
    // 新增逻辑也可以用函数式更新避免同类闭包问题
    props.setFiles(prevFiles => [...prevFiles, ...more_files]);
  }

  return (
    props.files.map(file => <File key={file.key} onClick={() => props.removeFile(file.key)} />)
  )
}

如果你的FileUploader用React.memo做了性能优化，还可以把removeFile用useCallback包裹减少不必要重渲染：

const removeFile = useCallback((key) => {
  setFiles(prevFiles => prevFiles.removeFileByKey(key))
}, [])

内容的提问来源于stack exchange，提问作者Paul Trimor