React：如何从父组件重新加载数据并在子组件更新时呈现？答案

【问题标题】：React: How to reload data from parent component and render when child component do update?React：如何从父组件重新加载数据并在子组件更新时呈现？
【发布时间】：2023-01-28 01:42:46
【问题描述】：

我有 1 个父组件、1 个子组件和 1 个子组件。我正在使用 Jotai 状态管理。

父组件：

有一个按钮可以查看LogDetails.js（对话框）

   const viewLog = useSetAtom(setViewStatusLogDialog);


      const handleShowStatusLog = (data) => {
             viewLog({
               open: true,
               data,  // the data I used in child component 
             });   };

子组件（LogDetails.js）：

查看所有日志详细信息
有一个创建按钮来添加新日志（会弹出另一个对话框）

    export const setViewStatusLogDialog = atom(null, (_get, set, update)
    => {   const { open, data} = update;   
   set(openStatusLogDialogAtom, open);   
   set(dataAtom, data);   });

孩子的子组件（创建表单）

在这里做提交和保存。

我的问题是：

当我在创建表单（子组件）中保存时，日志详细信息（子组件）不会获取最新数据并显示它，我该怎么做？

【问题讨论】：

标签： javascript reactjs jotai

【解决方案1】：

不确定 Jotai 状态管理，但您可以简单地将函数从子组件 (LogDetails.js) 传递到子组件的子组件，并在保存时使用新数据调用该函数。

子组件

function ChildComponent() {
  const logFunc = data => { ... }
  return <ChildChildComp logFunc={logFunc} />
}

Child 的子组件

function ChildComponent(props) {
  return <button onClick={() => logFunc(data)}>Save</button>
}

【讨论】：