React父组件根据状态调用子组件及Grid表格数据同步更新问题

• 子组件中的onGridReady回调仅在AgGrid组件首次挂载初始化时执行一次，此时父组件的gridData还未完成API请求，值为空数组，后续gridData更新后，子组件拿到新的tableData属性，但没有触发AgGrid的行数据同步逻辑，因此表格一直显示为空。
• 你之前的条件渲染逻辑是等gridData有值后才渲染子组件，onGridReady执行时已经能拿到非空数据，所以可以正常展示，但无法实现加载阶段显示空表格的需求。

步骤1：修改父组件，移除条件渲染 #

直接渲染子组件，保证加载阶段就显示空表格，同时修正原有代码的语法问题：

const ParentComponent = () => {
  const [gridData, setGridData] = useState([]);

  useEffect(() => { 
    getDataFunction(); 
  }, []); // 补充空依赖数组，避免重复请求

  const getDataFunction = async () => {
    try { 
      // 调用API获取数据逻辑
      const apiData = await fetchApi();
      setGridData(apiData);
    } catch (e) {
      // 异常处理
      setGridData([]);
    }
  }
          
  return (    
     <Grid tableData={gridData} columnData={你的列配置数据} />
  ); 
}

步骤2：修改子组件，监听tableData变化同步到AgGrid #

两种实现方式二选一即可：

方式1：使用AgGrid React的受控rowData属性（推荐，写法最简单） #

直接将tableData绑定到AgGridReact的rowData属性，AgGrid会自动监听数据变化更新表格：

const Grid = React.forwardRef(({ tableData, columnData, ...props}, ref) => {
  const activeColumn = [...columnData];
  const [gridApi, setGridApi] = useState(null);
  const [gridColumnApi, setGridColumnApi] = useState(null);

  const onGridReady = params => {
    setGridApi(params.api);
    setGridColumnApi(params.columnApi);
  }

  return (
    <AgGridReact
      onGridReady={onGridReady}
      columnDefs={activeColumn}
      pagination={true}
      rowData={tableData} // 直接绑定rowData，自动同步更新
      {...props}
    />
  );
});

方式2：手动用useEffect监听数据变化调用API更新 #

如果你需要自定义数据更新逻辑，可以通过监听tableData变化手动调用AgGrid的更新接口：

const Grid = React.forwardRef(({ tableData, columnData, ...props}, ref) => {
  const activeColumn = [...columnData];
  const [gridApi, setGridApi] = useState(null);
  const [gridColumnApi, setGridColumnApi] = useState(null);

  const onGridReady = params => {
    setGridApi(params.api);
    setGridColumnApi(params.columnApi);
  }

  // 监听tableData变化，同步更新表格行数据
  useEffect(() => {
    if (!gridApi) return;
    gridApi.setRowData(tableData);
  }, [tableData, gridApi]);

  return (
    <AgGridReact
      onGridReady={onGridReady}
      columnDefs={activeColumn}
      pagination={true}
      {...props}
    />
  );
});

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