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

Question

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;

Answer 1

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

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;