Question

我成功地将信息发送到 utils 组件以更新 Web 服务，但无法更新父级持有的状态

 return <User
 id = {item.id}
 name = {item.name}
 email = {item.email}
 street = {item.address.street}
 city = {item.address.city}
 zipcode = {item.address.zipcode}
 isCompletedTodos = {isCompletedTodos}
 unCompletedTodos = {unCompletedTodos}
 filterUsers={filteredUsers} 
 callbackUpdate={ data => utils.updateUser(data.id,data)}

 callbackDelete = { data => utils.deleteUser(data.id), data => this.setState(data)}
 />
}

Answer 1

为此，您可以：

简单的解决方案：从父元素传递回调并在数据更改时调用它
更复杂的解决方案：在您的应用程序（Redux 或 Mobx）中实现 FLUX。因此，您的组件将触发 store 中的更改，之后两个组件都会更新。

Answer 2

最好在父级中保存该回调，并将其作为 prop 传入。

家长：

const callbackUpdate = (id, data) => {
  util.doStuff(data);
  setState(data);
};
// the same for delete

<UserWrapper ...props callback={callback}/>

你的组件从 props 中获取回调，就像其他所有东西一样：

const UserWrapper = props => <User id={item.id} ...props callbackUpdate={data => props.callbackUpdate(item.id, data)} />;

现在您的组件（显然包装 <User> 的那个）不需要知道是先更新状态，还是先去后端，或者其他什么。它只是调用它传递的任何东西。您的父母可以决定是急切还是延迟更新状态、错误处理等等。

您可以进一步改进。在钩子中创建这些更新函数：

const useUsersApi = () {
  // your lil bit of state for the parent:
  const [something, setSomething] = useState();

  const updateUser = (id, data) => {
    return axios.put(`/url/${id}`, data)
        .then((response) => {
           setSomething(response);
           return response;
         });
  }
    const deleteUser = (id, data) => {
    return axios.put(`/url/${id}`, data)
        .then((response) => {
           setSomething(null);
           return response;
         });;
  }
  return {
     something, 
     updateUser,
     deleteUser
  }
}

现在你的父母可以直接使用 this 而不是 useState ：

const Parent = () => {
   const { something, updateUser, deleteUser } = useUsersApi();
   const item = whatever();
  return <UserWrapper item={item} updateUser={updateUser} deleteUser={deleteUser}/>
}

然后您的帖子中的组件是：

const UserWrapper = ({item, updateUser, deleteUser}) => {
  return <User id={item.id} ....
              callbackUpdate={data => updateUser(item.id, data}
              callbackDelete={data => deleteUser(item.id, data} />

如何在子更新对象后更新父状态？

2 个答案: