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

问题描述

尝试创建销售和物品表格。尝试测试在h1中打印出itemName，但不断出现以下错误

错误：无效的挂钩调用。挂钩只能在功能组件的主体内部调用。发生这种情况可能是由于以下原因之一：

1. 您可能使用了不匹配的React和渲染器版本（例如React DOM）
2. 您可能正在违反挂钩规则
3. 您可能在同一应用中拥有多个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}/>
         
            </form>

            <h1>{itemName}</h1>

          </div>  

解决方法

您必须这样声明

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