子组件更新服务器后如何更新父组件的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 检测你的数据更新。