React父组件传值到Modal弹窗内ag-grid无法绑定显示问题排查

问题根源 #

你的Modal组件内部的detailsData状态仅在首次挂载时用props.detailsData初始化，React的useState初始值不会随props更新自动同步：

• 父窗口拉取新数据后更新了传给Modal的detailsData属性，但Modal内部的本地状态没有同步更新，导致ag-grid拿到的还是旧数据
• Modal内按钮点击正常是因为调用的是Modal自身的setDetailsData，直接更新了本地状态，所以可以正常渲染

修复方案 #

方案1：移除Modal内部重复状态，统一由父组件维护（推荐） #

Modal不需要自己存储detailsData，直接使用props传入的值，Modal内部拉取新数据后，调用父组件传入的更新方法同步状态即可：

// 父组件修改
function ParentWindow(props) {
  const [detailsData, setDetailsData] = React.useState();
  const [isOpen, setIsOpen] = React.useState(false);

  function myCallBack() {
    // 调用接口拉取详情数据
    setDetailsData(data);
    setIsOpen(true);
  }

  // 向子组件传递更新方法
  const updateDetailsData = (newData) => {
    setDetailsData(newData);
  }

  return <MyDetailsData 
    show={isOpen} 
    detailsData={detailsData} 
    updateDetails={updateDetailsData}
  />
}

// Modal组件修改
function MyDetailsData(props) {
  const getDetails = async () => {
    // 调用接口拉取新数据
    const data = await xxx
    // 同步更新父组件状态
    props.updateDetails(data)
  }

  const columnInfo = [/* 你的列配置 */]

  return <>
    <Button value="Submit" onClick={getDetails} />
    <Modal show={props.show}>
      <AgGridReact rowData={props.detailsData} columnDefs={columnInfo} />
    </Modal>
  </>
}

方案2：保留Modal内部状态，新增props监听逻辑 #

如果需要Modal独立维护状态，新增useEffect监听父组件传入的detailsData变化，同步更新本地状态即可：

function MyDetailsData(props) {
  const [detailsData, setDetailsData] = React.useState(props.detailsData);

  // 新增这段监听逻辑，父组件传值更新时同步本地状态
  React.useEffect(() => {
    setDetailsData(props.detailsData);
  }, [props.detailsData])

  const getDetails = async () => {
    // 调用接口拉取新数据
    const data = await xxx
    setDetailsData(data)
  }

  const columnInfo = [/* 你的列配置 */]

  return <>
    <Button value="Submit" onClick={getDetails} />
    <Modal show={props.show}>
      <AgGridReact rowData={detailsData} columnDefs={columnInfo} />
    </Modal>
  </>
}

额外注意事项 #

如果你的Modal是隐藏而非销毁的，建议在Modal关闭时清空本地状态，避免下次打开时残留旧数据。

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