React子组件向父组件传态问题：弹窗关闭异常排查

核心问题分析 #

1. 子组件缺失关键状态prop
   父组件持有控制弹窗显示的executionDialogIsOpen状态，但未传递给子组件ExecutionDialog，导致UI5 Dialog的显示状态与父组件状态完全脱节，同时引发回调函数执行异常。
2. 父组件点击事件存在冗余参数
   handleOpenExecutionDetailsClick函数无需接收参数，但调用时传递了true，属于无效冗余代码。

修复步骤 #

1. 给子组件补充状态prop

父组件渲染ExecutionDialog时，必须传递控制弹窗显示的状态值，同时保留状态更新函数：

<ExecutionDialog 
  executionDialogIsOpen={executionDialogIsOpen}
  setExecutionDialogIsOpen={setExecutionDialogIsOpen}
/>

（注：原代码中包裹ExecutionDialog的大括号是多余的，直接渲染JSX元素即可）

2. 优化父组件点击事件

去掉冗余参数传递，可直接简化为：

<Button
  onClick={() => setExecutionDialogIsOpen(true)}
>
  Details
</Button>

也可以保留原函数但移除无用参数：

const handleOpenExecutionDetailsClick = () => {
  setExecutionDialogIsOpen(true);
};

// 调用时直接传函数引用
<Button onClick={handleOpenExecutionDetailsClick}>
  Details
</Button>

3. 子组件代码无需修改

子组件已正确使用props中的状态和更新函数，修复父组件后即可正常工作。

修复后完整代码 #

父组件：

const ExecutionsTable = () => {
  const [executionDialogIsOpen, setExecutionDialogIsOpen] = useState(false);

  return (
    <>
      <Button
        onClick={() => setExecutionDialogIsOpen(true)}
      >
        Details
      </Button>
      <ExecutionDialog 
        executionDialogIsOpen={executionDialogIsOpen}
        setExecutionDialogIsOpen={setExecutionDialogIsOpen}
      />
    </>
  );
}

子组件：

const ExecutionDialog = (props) => {
  return (
      <Dialog
         open={props.executionDialogIsOpen}
         onAfterClose={() => props.setExecutionDialogIsOpen(false)}
      />
  );
}

报错原因说明 #

表面上的TypeError: props.setExecutionDialogIsOpen is not a function是弹窗状态脱节引发的连锁反应：由于子组件未绑定父组件状态，UI5 Dialog的内部状态与React组件状态不同步，触发onAfterClose时出现props传递异常。修复状态绑定后，该报错会自然消失。

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