时间戳

首页 > 解决方案 > React中无效的挂钩调用，但它适用于其他人

javascript - React中无效的挂钩调用，但它适用于其他人

问题描述

我是一个非常非常业余的程序员，但我最近一直在尝试接触 JavaScript 和 ReactJS。它不漂亮，我不知道大多数东西是做什么的，但我想我会关注一些我感兴趣的东西的 YouTube 教程，所以我找到了一个我喜欢的并关注它。然而，在8 点52分, React 抛出了一个 Invalid Hook Call 错误。我的问题是，即使我很确定文档有解决方案，但我的业余水平不允许我阅读和理解它。基本上：我不知道文档说什么。下面是错误的附加屏幕截图（还有更多，如果有人要求我向下滚动）和完整代码的链接。如果有人可以提供帮助，那就太棒了，但基于评论的数量和缺乏承认这个错误的人，我认为它很难重现。此外，如果有任何帮助，我必须直接链接到一些东西（例如 React-Bootstrap），因为 react 不会只识别简单的单词。先感谢您 ：）

截屏

GitHub 代码

标签： javascriptreactjsreact-nativereact-hooks

解决方案

这几乎总是您的屏幕截图中的＃2 的问题（“您可能违反了 Hooks 的规则”）。最常见的错误（尽管我在您的视频中没有看到）是在函数组件的子函数中调用钩子，即

const Component = () => {
  // Good - hook is called at root of function component
  const selectorData = useSelector(getDataSelector);

  // Bad - hook is called inside a child function and has no context for hooks
  useEffect(() => {
    const data = useSelector(getDataSelector);
  }, []);

  return (
    // ...
  );
};

推荐阅读