错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。请帮我解决这个错误答案

【问题标题】：Error: Invalid hook call. Hooks can only be called inside of the body of a function component. please help me to solve this error错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。请帮我解决这个错误
【发布时间】：2021-08-13 19:26:56
【问题描述】：

import React, { useState } from "react";

const Regsiterme = () => {
  const [name, setName] = useState("");
  const [password, setPassword] = useState("");
  const [email, setEmail] = useState("");

  async function signUp() {
    let item = { name, password, email };

    let result = await fetch("http://127.0.0.1:8000/api/userRegister", {
      method: "POST",
      body: JSON.stringify(item),
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
    });
    result = await result.json();
    localStorage.setItem("user-info", JSON.stringify(result));
  }
  return (
    <>
      <h1 className="text-center">Regsiter Form</h1>

      <div class="mb-3 col-sm-6 offset-sm-3">
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
          class="form-control"
          placeholder="Enter Your Full Name"
        />
        <br /> <br />
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          class="form-control"
          placeholder="Enter Your Password"
        />
        <br /> <br />
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          class="form-control"
          placeholder="Enter Your Email"
        />
        <br /> <br />
      </div>
      <div class="mb-3 col-sm-6 offset-sm-3">
        <button onClick={signUp} type="submit" class="btn btn-primary">
          Submit
        </button>
      </div>
    </>
  );
};

export default Regsiterme;

【问题讨论】：

你如何使用这个组件？
我知道这并不能解决您的问题，对此我深表歉意.. 但是。如果你是从头开始构建东西，一般来说表格很难做到正确，所以我鼓励你看看像 React Hook Form 或 Formik 这样的包——两者都很棒，并且解决了很多问题你还没有实现。

标签： javascript html jquery json reactjs

【解决方案1】：

钩子只能在功能组件中使用。我认为调整您声明注册的方式应该可以解决您的问题。

import React, { useState } from "react";

const Regsiterme = () => {
  const [name, setName] = useState("");
  const [password, setPassword] = useState("");
  const [email, setEmail] = useState("");

  const signUp = async () => {
    let item = { name, password, email };

    let result = await fetch("http://127.0.0.1:8000/api/userRegister", {
      method: "POST",
      body: JSON.stringify(item),
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
    });
    result = await result.json();
    localStorage.setItem("user-info", JSON.stringify(result));
  }

  return (
    <>
      <h1 className="text-center">Regsiter Form</h1>

      <div class="mb-3 col-sm-6 offset-sm-3">
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
          class="form-control"
          placeholder="Enter Your Full Name"
        />
        <br /> <br />
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          class="form-control"
          placeholder="Enter Your Password"
        />
        <br /> <br />
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          class="form-control"
          placeholder="Enter Your Email"
        />
        <br /> <br />
      </div>
      <div class="mb-3 col-sm-6 offset-sm-3">
        <button onClick={signUp} type="submit" class="btn btn-primary">
          Submit
        </button>
      </div>
    </>
  );
};

export default Regsiterme;

【讨论】：