Reactjs React钩子：无效的钩子调用

正在尝试创建一个表单来销售和销售商品。正在尝试在

中测试打印

itemName

，但不断出现以下错误：

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

React和渲染器的版本可能不匹配（例如React DOM）

你可能违反了钩子的规则

同一应用程序中可能有多个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>
  );
}

import React，{useState}来自“React”；
从“/Navbar”导入导航栏；
功能销售（）{
const[itemName，setItemName]=useState（“”）；
函数句柄更改（事件）{
setItemName（event.target.value）；
}
返回(
你卖什么？
{itemName}
);
}

您必须这样声明

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

试试这个：

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>
  );
}

import React，{useState}来自“React”；
从“/Navbar”导入导航栏；
导出默认值（）=>{
const[itemName，setItemName]=useState（“”）；
常量handleChange=（事件）=>{
setItemName（event.target.value）；
}
返回(
你卖什么？
{itemName}
);
}

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

销售
是正确的。您的错误可能来自代码的另一部分。您可能需要共享其他部分以确定问题根源。这是否回答了您的问题？仍然得到相同的错误。不过，我知道使用箭头函数更好。