从类组件转React Hooks函数组件，模态框调用报错求助

我来帮你搞定这个问题！你从类组件切换到函数组件后遇到的这个错误，核心原因是函数组件的闭包特性以及useState状态更新的异步逻辑，和类组件的状态访问方式有本质区别。

问题根源分析 #

在类组件里，this.state.modal是直接从组件的状态对象中读取的，每次状态更新后，this.state都会指向最新的状态快照，所以调用this.state.modal(lol)时总能拿到最新的模态框回调函数。

但在函数组件中，onRowSelected函数会“捕获”它定义时所在闭包的modal值。如果Modal组件的getOnOpen回调是在组件挂载后才执行的，那最初的onRowSelected里的modal还是初始的null值，这时候点击网格行自然就会报错“不是函数”。

解决方案1：使用useRef存储回调（推荐） #

useRef创建的引用对象，它的.current属性可以在组件整个生命周期中保持更新，不会被闭包固定住，能随时拿到最新的回调函数。修改后的代码如下：

import { useState, useRef } from 'react';

function MyGrid(props) {
  // 用ref存储模态框回调，替代useState
  const modalRef = useRef(null);
  const [rowData, setRowData] = useState([]);
  const columnDefs = [{headerName: 'Title', field: 'title'}, {headerName: 'Count', field: 'count'}];

  function onRowSelected(lol) {
    // 先判断回调是否存在，避免空调用报错
    if (modalRef.current) {
      modalRef.current(lol);
    }
  }

  return (
    <>
      {/* 将回调直接存入ref的current属性 */}
      <Modal getOnOpen={callback => modalRef.current = callback} />
      <div style={{ height: '500px' }}>
        <Grid
          columnDefs={columnDefs}
          rowData={rowData}
          onGridReady={params => { params.api.sizeColumnsToFit() }}
          onRowSelected={onRowSelected}
        />
      </div>
    </>
  )
}
export default MyGrid

解决方案2：结合useCallback和useState #

如果你坚持要用useState，可以通过useCallback确保onRowSelected函数总能拿到最新的modal值，不过这种方式可能会导致Grid组件因函数引用变化而重新渲染，性能上略逊于第一种方案：

import { useState, useCallback } from 'react';

function MyGrid(props) {
  const [modal, setModal] = useState(null);
  const [rowData, setRowData] = useState([]);
  const columnDefs = [{headerName: 'Title', field: 'title'}, {headerName: 'Count', field: 'count'}];

  // 用useCallback包裹，依赖modal状态，确保状态更新时函数也更新
  const onRowSelected = useCallback((lol) => {
    if (modal) {
      modal(lol);
    }
  }, [modal]);

  return (
    <>
      <Modal getOnOpen={callback => setModal(callback)} />
      <div style={{ height: '500px' }}>
        <Grid
          columnDefs={columnDefs}
          rowData={rowData}
          onGridReady={params => { params.api.sizeColumnsToFit() }}
          onRowSelected={onRowSelected}
        />
      </div>
    </>
  )
}
export default MyGrid

两种方案都加入了空值判断，避免在Modal还没传递回调过来时点击行出现额外错误。

内容的提问来源于stack exchange，提问作者Nguyễn Trường Yến