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

时间:2020-08-12 17:38:00

标签: reactjs jsx

尝试创建销售和物品表格。尝试测试在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>  

2 个答案:

答案 0 :(得分:0)

您必须这样声明

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

答案 1 :(得分:0)

试试这个:

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