反应钩子：无效的钩子调用

Posted 2023-02-22

【中文标题】反应钩子：无效的钩子调用

【英文标题】：React hooks: Invalid hook call

【发布时间】：2020-12-02 12:32:58

【问题描述】：

试图创建一个表格来销售和物品。尝试在<h1> 中测试打印itemName，但不断收到以下错误：

错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一：

您的 React 和渲染器版本可能不匹配（例如 React DOM） 您可能违反了 Hooks 规则 您可能在同一个应用中拥有多个 React 副本

有人能够阐明我做错了什么：

import React,  useState  from "react";
import Navbar from "./Navbar";

function Selling() 
  const [itemName, setItemName] = useState("");

  function handleChange(event) 
    setItemName(event.target.value);
  

  return (
    <div>
      <form>
        <h4 className="selling-input-title">What are you selling?</h4>
        <div class="form-group">
          <input type="text"
            onChange=handleChange
            class="form-control item"
            id="usr"
            value=itemName />
        </div>
      </form>
      <h1>itemName</h1>
    </div>
  );

【问题讨论】：

您能否格式化您的代码，以便我们帮助您更容易阅读？并删除与问题无关/重现问题所必需的所有内容。

您的组件Selling 是正确的。您的错误可能来自代码的另一部分。您可能需要共享其他部分来确定问题根源。

这能回答你的问题吗？ Invalid hook call. Hooks can only be called inside of the body of a function component

【参考方案1】：

你必须这样声明

  const handleChange = (event) => 
  setItemName(event.target.value);
  

【讨论】：

仍然遇到同样的错误。我知道使用箭头函数是更好的做法。

【参考方案2】：

试试这个：

import React,  useState  from "react";
import Navbar from "./Navbar";

export default () => 
  const [itemName, setItemName] = useState("");

  const handleChange = (event) => 
  setItemName(event.target.value);
  

  return (
    <div>
      <form>
        <h4 className="selling-input-title">What are you selling?</h4>
        <div class="form-group">
          <input type="text"
            onChange=handleChange
            class="form-control item"
            id="usr"
            value=itemName />
        </div>
      </form>
      <h1>itemName</h1>
    </div>
  );