ReactJS：如何在页面的子组件中使用 useState？

问题描述

我正在尝试在表单中使用 useState，但出现以下错误：

Can't perform a React state update on an unmounted component. This is a no-op,but it indicates a memory leak in your application. To fix,cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

这是组件的代码：

import React,{useState} from "react";

import {
  Container,FormWrap,Icon,FormContent,Form,FormH1,Formlabel,FormInput,FormButton
} from "./SignupElements";

const SignUp = () => {

  const [email,setEmail] = useState('');
  const [username,setUsername] = useState('');
  const [name,setName] = useState('');
  const [firstSurname,setFirstSurname] = useState('');
  const [secondSurname,setSecondSurname] = useState('');
  const [password,setPassword] = useState('');

  return (
    <>
      <Container>
        <FormWrap>
          <Icon to="/">App</Icon>
          <FormContent>
            <Form action="#">
              <FormH1>Sign up</FormH1>
              <Formlabel htmlFor="for">Email</Formlabel>
              <FormInput onChange={(e) => setEmail(e.target.value)} type="email" required />
              <Formlabel htmlFor="for">Username</Formlabel>
              <FormInput onChange={(e) => setUsername(e.target.value)} type="text" required />
              <Formlabel htmlFor="for">Name</Formlabel>
              <FormInput onChange={(e) => setName(e.target.value)} type="text" required />
              <Formlabel htmlFor="for">First Surname</Formlabel>
              <FormInput onChange={(e) => setFirstSurname(e.target.value)} type="text" required />
              <Formlabel htmlFor="for">Second Surname</Formlabel>
              <FormInput onChange={(e) => setSecondSurname(e.target.value)} type="text" />
              <Formlabel htmlFor="for">Password</Formlabel>
              <FormInput onChange={(e) => setPassword(e.target.value)} type="password" required />
              <FormButton type="submit">Sign Up</FormButton>
            </Form>
          </FormContent>
        </FormWrap>
      </Container>
    </>
  );
};

export default SignUp;

react app 有不同的页面（直到现在是 index 和 sing-up），也许是相关信息，但我不知道如何解决。

如果有人知道如何解决它，我将非常感谢您的回答。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）