从组件外的函数调用反应设置钩子
我正在测试新的React钩子，我遇到了一个我无法修复（也无法理解）的行为。基本上，我有我的函数组件，在它里面有一个函数，我在其中设置钩子。这个函数被传递给一个呈现的组件，并使用props从最后一个呈现的组件调用它。太糟糕了，父级的钩子没有相应地更新！
我知道这似乎很难理解，但我在这里复制了这个错误https://codesandbox.io/s/vvwp33l7o5
我不知道，似乎我不能从组件外部更新钩子（这就像React Statefent组件中的状态一样，但至少我可以像本例那样传递函数，但它不起作用：/）。
知道如何使setcounter位于index.js的12处工作吗？
共有1个答案
另一个答案有点困惑--你所做的一切都很好。当它说不要从内部调用钩子时，这意味着不要有条件地或从循环中调用实际的API，例如有条件地定义useEffect或usestat。
您的问题源于在observer.js中传递给效果的空数组，因为它是空的，效果永远不会刷新，因此闭包是陈旧的，因此当onresize函数调用setstate时，counter值始终是零的初始值。
您需要使useEffect依赖于某些东西，以便在组件更新时清除以前的效果，并将onresize函数的新版本附加到ResizeObserver。
我翻了一下你的沙箱:https://codesandbox.io/s/x9z7k245lq?fontsize=14
它现在将计数器状态向下传递给观察者组件，每次计数器更改时都会运行效果。问题是，我还在索引中添加了一些refs来跟踪高度/宽度，这样状态就不会总是更新，否则它将无限循环。我想您可以将其理解为ShouldComponentUpdate。
正确地思考需要一段时间。如果您想要阅读一篇关于钩子的好文章，并避免一些关于空数组和陈旧闭包的陷阱，请查看以下内容：https://overreacted.io/making-setinterval-declarative-with-react-hooks/
-
我正在尝试使用react钩子创建一个悬停以显示div，我遇到了以下问题： 第69:31行：在函数“renderHideOptionalClauseTrigger”中调用React钩子“useState”，该函数既不是React函数组件，也不是自定义React钩子函数React钩子/钩子规则 搜索关键字以了解有关每个错误的更多信息。 以下是我的代码库：
-
问题内容： 随着React 中钩子的引入，现在的主要困惑是何时将函数组件与钩子和类组件一起使用，因为在钩子的帮助下，甚至可以在函数组件中获得和部分使用。所以，我有以下问题 钩子的真正优点是什么？ 何时使用带有钩子的函数组件和类组件？ 例如，带有钩子的功能组件不能像类组件那样帮助性能。他们没有执行就不能跳过重新渲染。还有其他原因吗？ 提前致谢。 问题答案： 引入和其他特性（例如和）的思想是帮助减少必
-
问题内容： 我不确定之前是否有人问过这个问题，或者有人在reactjs上遇到过同样的问题。所以场景是这样的，我有一个包含一些javascript 的 index.html 文件。现在，在我的react组件上，我有一个仅在条件为true时才会呈现的条件。这意味着最初在我的页面加载时，尚未呈现该组件。当我切换按钮时，这就是渲染该组件的地方。该子组件需要调用index.html中包含的javascrip
-
我得到以下错误，不确定我在箭头函数内实例化 react 钩子时做错了什么： 错误：挂接调用无效。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一： 您可能有不匹配的React和渲染器版本（如React DOM）。 您可能违反了钩子的规则。 同一应用程序中可能有多个React副本。请参阅https://reactjs.org/link/invalid-hook-call有关如何调试和修复此
-
我的react组件的构造函数被调用了两次，但我不知道为什么。我正在使用react redux存储我的应用程序的语言。我有一个基于浏览器语言设置默认语言的函数。LoginPage是第一个获得render的组件，因此我在其构造函数中调用了我的函数。基本上，它所做的就是比较并分派一个动作。当我用redux开发工具检查我的状态时，我看到它被调度了两次。我在构造函数中打印了虚拟数据，它也打印了两次。 登录页
-
我想使用React在表中显示一些记录，但我得到了这个错误： 无效的挂接调用。钩子只能在函数组件的主体内部调用。这可能是以下原因之一： 您可能有不匹配的React和渲染器版本（如React DOM） 你可能违反了钩子规则 在同一个应用程序中可能有多个React副本，请参阅有关如何调试和修复此问题的提示。