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

Question

I've 1 Parent component, 1 child component, and 1 child's child component. Im using Jotai state management.

Parent Component:

• Have a button to view LogDetails.js (Dialog)

   const viewLog = useSetAtom(setViewStatusLogDialog);


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

Child component (LogDetails.js):

• To view all log details
• Have a create button to add new log(Will pop up another Dialog)

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

Child's child component (create form)

• Here to do submit and save.

My Problem is:

When I do save in the create form (Child's child component), the log details (child component) wont get the latest data and show it, how can I do that?

Answer 1

Not sure about Jotai state management, but you can simple pass a function from Child Component (LogDetails.js) to Child's child component and call that function with new data on save.

ChildComponent

function ChildComponent() {
  const viewLog = useSetAtom(setViewStatusLogDialog);
  const setNewLogData = newData => {
    const data = [...oldData, newData];
    viewLog({open: true, data });
  }

  return <>
    {logData.map(data => <p>{data}</p>}
    <ChildChildComp setNewLogDataToParent={setNewLogData} />
  </>
}

Child's child component

function ChildComponent(props) {
  const [data, setData] = useState();
  const onSave = () => {
     ...
     props.setNewLogDataToParent(data);
  }
  return <>
    <input type="text" onChange={e => setData(e.target.value) />
    <button onClick={onSave}>Save</button>
  </>
}