reactjs - 如何触发深度嵌套子组件的刷新
问题描述
我有一个深度嵌套的组件层次结构（想想 5 个相互包含的组件），现在我可能会在其中一个嵌套（子）组件中执行一些后端请求。在此之后，我想刷新父级上的数据，所以一切都显示新数据。对于我过去只传递一个可以从子级调用的刷新方法的层次结构步骤。但是对于更深的嵌套，这似乎很容易出错，而且不是正确的方法。有关如何正确处理此问题的任何提示？我在可以使用上下文 api 的地方读到，但这对我来说似乎不是正确的方法，但我可能在这里弄错了，有什么想法吗？
解决方案
你必须这样想：在反应中，你不想“触发刷新”，这是反应的工作。你想告诉 react 这段 UI 依赖于这段数据，并让它担心渲染。
您可以通过拥有关于数据的单一事实来源来实现这一点（context、redux、useReducer hook 是三个有趣的选项）。然后，您需要订阅组件内的数据更新，无论它们嵌套多么深（通常通过钩子）。
编辑
是的，我不太明白你的问题！这是另一种尝试:-)
所以基本上你使用 useState 钩子将你的状态存储在父组件中，通过 props 将该状态传递给子组件，并让嵌套的子组件之一执行对后端的调用。
当您只有一两级层次结构时，通过传递一个函数来更新该状态可以正常工作，但是您已经注意到，当您有深度嵌套的子级时，这种方式无法扩展。
在我看来，您的数据需要单一的事实来源。通过 props 传递状态不是一个好的解决方案，因为嵌套组件没有办法实际更新您的数据。
你应该看看 Redux。您的用例实际上是我第一次使用它的原因（我很确定大多数人也是如此）。
您的所有状态都在一个对象中，您可以从层次结构中的任何组件访问它，它的美妙之处在于任何组件都可以发送更新。
当然，如果您从任何组件更新状态对象（存储），则使用数据的任何其他组件都会更新。
查看Dan Abramov 的优秀教程，他教你如何以 redux 方式思考。
此外，redux 工具包是一个库，它允许您在使用 redux 的同时编写更少的代码。