子組件更新服務器后如何更新父組件的state？

Question

我有一個待辦事項列表，在子組件中向其添加項目后，更改不會立即反映出來。 我必須手動重新加載頁面才能看到變化。結構是這樣的。

 ToDo(Parent Compon.net) -> Todoi(Child Component)

我正在更新子組件中的數據，但正如我之前所說，除非我手動重新加載頁面，否則它不會反映更改。 如果我可以通過子組件以某種方式更改父組件中的 state，那么該組件將自行重新加載，但我無法做到。 這是我更新列表的部分。

 const handleList= (e) => { e.preventDefault(); console.log(e); console.log(addtodo); axios.post('/list',{ data:addtodo, userid:username }).then(function(res){ if(res.data === "ToDo Updated"){ navigate(`/todo/${username}`); } }); }

我應該怎么做才能做到？

Answer 1

您可以將 state setter 傳遞給您的子組件，然后在您的帖子 function 中添加新條目：

 const handleList= (e) => { e.preventDefault(); console.log(e); console.log(addtodo); axios.post('/list',{ data:addtodo, userid:username }).then(function(res){ if(res.data === "ToDo Updated"){ setList(prevState => prevState.concat(addtodo)); } }); }

 <YourComponent setList={setList}/>

或者您可以向您的組件添加一個回調 function 道具，該道具在成功請求時執行，如下所示：

 const handleList= (e) => { e.preventDefault(); console.log(e); console.log(addtodo); axios.post('/list',{ data:addtodo, userid:username }).then(function(res){ if(res.data === "ToDo Updated"){ onSuccess(addtodo) } }); }

 <YourComponent onSuccess={(todo)=>setList(prevState => prevState.concat(todo))}/>

我不確定您的狀態/數據類型是什么樣的，但我希望這會有所幫助！

Answer 2

通常，一個 React 組件會在兩種情況下被重新渲染：

1. 狀態已更新。
2. 道具已更新。

因此，我們可以在子組件中手動觸發父組件的狀態變化，或者更新服務器響應作為父組件的 props。

我不知道你如何處理父組件中的數據，但我想你可能需要讓 React 檢測你的數據更新。