React：如何從父組件重新加載數據並在子組件更新時呈現？

Question

我有 1 個父組件、1 個子組件和 1 個子組件。 我正在使用 Jotai state 管理。

父組件：

• 有個按鈕可以查看LogDetails.js（Dialog）

   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);   });

孩子的子組件（創建表單）

• 這里要做提交和保存。

我的問題是：

當我在創建表單（子組件）中保存時，日志詳細信息（子組件）不會獲取最新數據並顯示它，我該怎么做？

Answer 1

不確定 Jotai state 管理，但您可以簡單地將 function 從子組件 (LogDetails.js) 傳遞到子組件的子組件，並在保存時使用新數據調用該 function。

子組件

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 的子組件

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>
  </>
}