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

【问题标题】：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

标签： reactjs jsx

【解决方案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>
  );
}

【讨论】：