React-Hooks :跨独立组件监听事件

Question

我的应用有如下示例结构：

<App>
--<Users>
------<UserList/>
--</Users>
--<UserManagement>
------<UserList/>
------<AddUser/>
--</UserManagement>
</App>

在<UserManagement>中，我使用一个状态变量来监听在<AddUser>中发生的突变，以便<UserList>在突变完成后直接更新。

现在，如果我添加一个用户并转到，<UserList>不会重新呈现，因为它不知道数据库中的更改。例如，我不知道useEffect钩子应该监听什么。

我考虑过使用<App>中提供的React上下文。但我不确定这是否是正确的解决方案。我使用的是一个简单的sqlite数据库，没有提供任何订阅工具或东西。

有人能给我个提示吗？

我希望这是可以理解的，否则我会提供代码。

谢谢!

Answer 1

有两种方法：

1. 您可以将相同的状态变量传递给表示用户列表中的更改的组件。使用useEffect钩子侦听此变量，以便再次从数据库中获取用户列表。

1. 创建了另一个状态变量，基本上与您的数据库同步。将此变量传递给组件。添加用户时，将添加到sql数据库和此变量。您还可以将这个变量传递到中以显示用户。请记住，这种方法基本上是复制用户列表。