如何修复 React(TypeScript) 错误“无效的钩子调用。”？答案

【问题标题】：How to fix React(TypeScrtipt) error "Invalid hook call."?如何修复 React(TypeScript) 错误“无效的钩子调用。”？
【发布时间】：2021-01-14 17:18:48
【问题描述】：

我收到错误：“无效的钩子调用。只能在函数组件的主体内部调用钩子。”在反应函数中：

interface Items {
  items: any[]
}

const [items, setItems] = useState<Items>();

const ItemsList: React.FC<Items> = ({ items }) => {
  useEffect(() => {
    const response = Http.get<Items>(url).then(res => setItems(res)) || [] as Items[]
  }, []) //something wrong with this hook?

  return (
      <ul>
        {items.map((item) => {
          return (
            <ItemPreview key={item.id} item={item}/>
          );
        })}
      </ul>
  )
}

export default ItemsList

我不明白我做错了什么？谁能告诉我错误在哪里？

【问题讨论】：

与错误消息中的内容几乎完全相同：您在声明函数组件之前调用了 useState 钩子。
将const [items, setItems] = useState<Items>();移动到useEffect(() => {上方和ItemsList: React.FC<Items>下方。

标签： javascript reactjs typescript react-hooks

【解决方案1】：

您需要从组件中调用 React Hooks，如下所示：

interface Items {
  items: any[]
}

const ItemsList: React.FC<Items> = ({ items }) => {
  const [items, setItems] = useState<Items>();
 
  useEffect(() => {
    const response = Http.get<Items>(url).then(res => setItems(res)) || [] as Items[]
  }, []);

  return (
      <ul>
        {items.map((item) => {
          return (
            <ItemPreview key={item.id} item={item}/>
          );
        })}
      </ul>
  )
}

export default ItemsList

请参阅Rules of Hooks 了解更多信息：

仅来自 React 函数的调用挂钩

不要从常规 JavaScript 函数中调用 Hooks。相反，您可以：

✅ 从 React 函数组件调用 Hooks。

✅ 从自定义 Hooks 调用 Hooks。

【讨论】：

谢谢。在您回答之前，我已修复 @Sam R.said 之类的错误（您还需要删除 { items }），现在我又遇到了另一个错误：）“对象可能是“未定义”。在“items.map”行中。
这是正确的。在 useEffect 挂钩中进行 api 调用时，您可能还需要查看这篇关于避免竞争条件的博客文章。 flufd.github.io/avoiding-race-conditions-use-current-effect
@eu97 不确定它是否对您有用，但我使用 use-async-resource 和 <Suspense /> 边界。