React组件传值出现Invalid Hook Call错误 AG Grid API调用undefined问题

核心问题点 #

• 违反React Hook使用规则：useContext只能在React函数组件内部或者自定义Hook中调用，你直接在组件外部调用React.useContext(Context)本身就会触发Hook规则报错，无法拿到正确的上下文数据。
• 你把gridOptionsPeers等依赖动态上下文数据的变量全部定义在了React组件函数外部，这些代码仅会在JS模块首次加载时执行一次，后续上下文里的peerData更新时，gridOptionsPeers.rowData不会同步更新，初始化时peerData为空就会导致AG Grid无数据渲染。
• AG Grid的api对象仅会在组件完成挂载后才会注入到gridOptions中，你当前没有处理挂载后api初始化的逻辑，调用时自然返回undefined。
• 选择事件的回调函数里变量名错误：你定义了const fsymId = selectedRows[0].currency，后续调用selectCompany(id)时的id变量根本不存在，会触发运行时报错。

修复后代码 #

import ..
// 静态不变的配置可以放在组件外部减少重复创建
const columnDefs = [
  {
    id: 'currency',
    field: 'currency',
    headerName: 'currency',
  },
  {
    id: 'Cash',
    field: 'Cash',
    headerName: 'Cash',
    width : 200,
    resizable : true,
  },
];

const gridOptionsPeers = {
  columnDefs : columnDefs,
  rowSelection : 'multiple'
};

export default function PeerDetails(props) {
  // 所有Hook调用移到组件内部
  const { selectedCompany, peerData, selectCompany } = React.useContext(Context);
  // 存储AG Grid的api实例
  const [gridApi, setGridApi] = React.useState(null);

  // 监听peerData变化，同步更新表格数据
  React.useEffect(() => {
    console.log({peerData})
    if (gridApi && peerData) {
      gridApi.setRowData(peerData);
    }
  }, [peerData, gridApi]);

  // 表格初始化完成后获取api实例
  const onGridReady = (params) => {
    setGridApi(params.api);
    // 初始化时如果已经有peerData就直接赋值
    if (peerData) {
      params.api.setRowData(peerData);
    }
  }

  function onSelectionChanged() {
    if (!gridApi) return;
    const selectedRows = gridApi.getSelectedRows();
    if (selectedRows.length == 1) {
      const fsymId = selectedRows[0].currency;
      // 修复变量名错误
      selectCompany(fsymId);
      console.log({'These rows Selected' : fsymId})
    } else {
      console.log('No row selected');
    }
  }

  return (
    <Card>
      <CardHeader><h4>Peers</h4></CardHeader>
      <CardBody>
        <Row style={{ height: '450px' }}>
          {/* {  <Col w='' style={{ width: w, minWidth: w, maxWidth: w }}>
            {<PeersChart />}
          </Col>} */}
          <Col>
            <Grid
              columnDefs={columnDefs}
              style={{ width: '100%', height: '100%' }}
              containerStyle={{ width: '100%', height: '100%' }}
              tooltipShowDelay={0}
              onSelectionChanged={onSelectionChanged}
              gridOptions={gridOptionsPeers}
              onGridReady={onGridReady}
            />
          </Col>
        </Row>
      </CardBody>
    </Card>
  );
};

补充说明 #

你也可以选择直接给Grid组件传递rowData={peerData}属性，不用手动调用setRowData，AG Grid原生支持响应这个prop的变化自动更新表格数据，更贴合React的开发习惯。

内容的提问来源于stack exchange，提问作者Shivam Agrawal