javascript 如何从父组件重新加载数据并在子组件更新时进行渲染?

k97glaaz  于 2023-01-29  发布在  Java
关注(0)|答案(1)|浏览(164)

我有一个父组件,一个子组件,和一个子组件的子组件。我使用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);   });

子组件的子组件(创建表单)

  • 在此提交并保存。

我的问题是:
当我保存在创建表单(孩子的子组件)中时,日志详细信息(子组件)不会获得最新的数据并显示它,我该怎么做?

djp7away

djp7away1#

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

子组件

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

子项的子组件

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

相关问题