reactjs - 如何修复反应中的内存泄漏？

Question

const Register = () => {
  const [username, setUsername] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [passConf, setPassConf] = useState("");
  const [errors, setErrors] = useState([]);
  const [loading, setLoading] = useState(false);
  const [usersRef, setUsersRef] = useState(null);

  const isPasswordValid = () => {
    if (password.length < 6 || passConf.length < 6) {
      return false;
    } else if (password !== passConf) {
      return false;
    } else {
      return true;
    }
  };

  const isFormValid = () => {
    let errors = [];
    let error;

    if (!isPasswordValid()) {
      error = { message: "Password is invalid" };
      setErrors(errors.concat(error));
      return false;
    } else {
      return true;
    }
  };

  const saveUser = (createdUser) => {
    setUsersRef(firebase.database().ref("users"));
    return usersRef.child(createdUser.user.uid).set({
      name: createdUser.user.displayName,
      avatar: createdUser.user.photoURL,
    });
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    if (isFormValid()) {
      setErrors([]);
      setLoading(true);
      firebase
        .auth()
        .createUserWithEmailAndPassword(email, password)
        .then((createdUser) => {
          console.log(createdUser);
          createdUser.user
            .updateProfile({
              displayName: username,
              photoURL: `https://gravatar.com/avatar/${md5(
                createdUser.user.email
              )}?d=identicon`,
            })
            .then(() => {
              saveUser(createdUser).then(() => {
                console.log("user saved");
                setLoading(false);
              });
            })
            .catch((err) => {
              setLoading(false);
              setErrors(errors.concat(err));
            });
        })
        .catch((err) => {
          setLoading(false);
          setErrors(errors.concat(err));
        });
    }
  };

  const displayErrors = (errors) =>
    errors.map((error, i) => <p key={i}>{error.message}</p>);

  return (
    <Grid textAlign="center" verticalAlign="middle" className="app">
      <Grid.Column style={{ maxWidth: 450 }}>
        <Header as="h2" icon color="orange" textAlign="center">
          <Icon name="rocketchat" color="orange" />
          Register for Super Chat
        </Header>
        <Form onSubmit={handleSubmit} size="large">
          <Segment stacked>
            <Form.Input
              fluid
              name="username"
              icon="user"
              iconPosition="left"
              type="text"
              placeholder="Username"
              value={username}
              required
              onChange={(e) => setUsername(e.target.value)}
            />
            <Form.Input
              fluid
              name="email"
              icon="mail"
              iconPosition="left"
              type="email"
              placeholder="Email"
              value={email}
              required
              onChange={(e) => setEmail(e.target.value)}
            />
            <Form.Input
              fluid
              name="password"
              icon="lock"
              iconPosition="left"
              type="password"
              placeholder="Password"
              value={password}
              required
              onChange={(e) => setPassword(e.target.value)}
            />
            <Form.Input
              fluid
              name="passConf"
              icon="repeat"
              iconPosition="left"
              type="password"
              placeholder="Password Confirmation"
              value={passConf}
              required
              onChange={(e) => setPassConf(e.target.value)}
            />
            <Button disabled={loading} color="orange" fluid size="large">
              Submit
            </Button>
          </Segment>
        </Form>
        {errors.length ? (
          <Message error>
            <h3>Error</h3>
            {displayErrors(errors)}
          </Message>
        ) : null}
        <Message>
          Already a user? <Link to="/login">Login</Link>
        </Message>
      </Grid.Column>
    </Grid>
  );
};

警告：无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要解决此问题，请在 useEffect 清理函数中取消所有订阅和异步任务。

我无法找到此内存泄漏发生的位置。我可以使用一个帐户登录，但在注销并使用另一个帐户再次登录后，它会发出此警告，并且 firebase 实时数据库也没有更新。

如何在这里修复内存泄漏？

标签： reactjsfirebasefirebase-realtime-database