错误：无法在未安装的组件上执行 React state 更新

Question

这是完全错误

警告：无法对未安装的组件执行 React state 更新。 这是一个无操作，但它表明您的应用程序中存在 memory 泄漏。 要修复此问题，请在 useEffect 清理 function 中取消所有订阅和异步任务。 在注册页面

这是我的 siguppage.js 文件

import React, { useState } from 'react'
import { withFirebase } from '../firebase/Context'
import { useHistory } from 'react-router-dom'
import { compose } from 'recompose'
import withAuthUser from '../UserData/withAuthUser'

const SignUpPage = (props) => {
    const [Email, setEmail] = useState('')
    const [PasswordOne, setPasswordOne] = useState('')
    const [PasswordTwo, setPasswordTwo] = useState('')
    const [UserName, setUserName] = useState('')
    const [error, setError] = useState('')
    let history = useHistory()
    const [AuthUser, setAuthUser] = props.AuthUser()

    const onSubmit = () => {
        props.firebase
            .createUserWithEmailAndPassword(Email, PasswordOne)
            .then((authUser) => {
                history.push('/home')
                setAuthUser(authUser)
            })
            .catch((error) => {
                setError(error)
                console.log(error)
            })
    }

    const IsInvalid =
        Email === '' ||
        PasswordOne === '' ||
        PasswordTwo === '' ||
        UserName === '' ||
        PasswordTwo !== PasswordOne

    return (
        <div>
            <h1>Sign Up</h1>

            <input
                type='text'
                placeholder='UserName'
                value={UserName}
                onChange={(UserName) => {
                    const { value } = UserName.target
                    setUserName(value)
                }}
            ></input>
            <input
                type='text'
                placeholder='email'
                value={Email}
                onChange={(Email) => {
                    const { value } = Email.target
                    setEmail(value)
                }}
            ></input>
            <input
                type='password'
                placeholder='PasswordOne'
                value={PasswordOne}
                onChange={(pass) => {
                    const { value } = pass.target
                    setPasswordOne(value)
                }}
            ></input>
            <input
                type='password'
                placeholder='PasswordTwo'
                value={PasswordTwo}
                onChange={(pass) => {
                    const { value } = pass.target
                    setPasswordTwo(value)
                }}
            ></input>
            <button disabled={IsInvalid} onClick={onSubmit} type='submit'>
                Submit
            </button>

            {error && <p>{error.message}</p>}
        </div>
    )
}

export default compose(withFirebase, withAuthUser)(SignUpPage)

我为此使用了 HOC，我通过类似这样的 withAuthUser 传递了props.AuthUser

const withAuthUser = (Component) => (props) => {
    return (
        <AuthUserContext.Consumer>
            {(AuthUser) => <Component {...props} AuthUser={AuthUser}></Component>}
        </AuthUserContext.Consumer>
    )
}

AuthUser是 function

export const Value = () => {
    const [AuthUser, setAuthUser] = useState(null)
    return [AuthUser, setAuthUser]
}

我将这个 function 传递给主index.js中的 Provider usign 上下文

所以我试图通过调用 props.setAuthUser 来更新AuthUser的 state 但它给出了这个错误..

Answer 1

当您在离开屏幕后尝试在屏幕内更新 state 时会出现此错误。 要解决这个问题，我们需要使用useEffect挂钩清理 function

所以你的SignupPage.js应该是这样的

import React, { useEffect, useState } from "react";
import { withFirebase } from "../firebase/Context";
import { useHistory } from "react-router-dom";
import { compose } from "recompose";
import withAuthUser from "../UserData/withAuthUser";

const SignUpPage = (props) => {
  const [Email, setEmail] = useState("");
  const [PasswordOne, setPasswordOne] = useState("");
  const [PasswordTwo, setPasswordTwo] = useState("");
  const [UserName, setUserName] = useState("");
  const [error, setError] = useState("");
  let history = useHistory();
  const [AuthUser, setAuthUser] = props.AuthUser();

  useEffect(() => {
    return () => {};
  }, []);

  const onSubmit = () => {
    props.firebase
      .createUserWithEmailAndPassword(Email, PasswordOne)
      .then((authUser) => {
        history.push("/home");
        setAuthUser(authUser);
      })
      .catch((error) => {
        setError(error);
        console.log(error);
      });
  };

  const IsInvalid =
    Email === "" ||
    PasswordOne === "" ||
    PasswordTwo === "" ||
    UserName === "" ||
    PasswordTwo !== PasswordOne;

  return (
    <div>
      <h1>Sign Up</h1>

      <input
        type="text"
        placeholder="UserName"
        value={UserName}
        onChange={(UserName) => {
          const { value } = UserName.target;
          setUserName(value);
        }}
      ></input>
      <input
        type="text"
        placeholder="email"
        value={Email}
        onChange={(Email) => {
          const { value } = Email.target;
          setEmail(value);
        }}
      ></input>
      <input
        type="password"
        placeholder="PasswordOne"
        value={PasswordOne}
        onChange={(pass) => {
          const { value } = pass.target;
          setPasswordOne(value);
        }}
      ></input>
      <input
        type="password"
        placeholder="PasswordTwo"
        value={PasswordTwo}
        onChange={(pass) => {
          const { value } = pass.target;
          setPasswordTwo(value);
        }}
      ></input>
      <button disabled={IsInvalid} onClick={onSubmit} type="submit">
        Submit
      </button>

      {error && <p>{error.message}</p>}
    </div>
  );
};

export default compose(withFirebase, withAuthUser)(SignUpPage);

试试这个，让我知道。

Answer 2

您正在尝试在未安装的组件上设置 state。

const onSubmit = () => {
  props.firebase
    .createUserWithEmailAndPassword(Email, PasswordOne)
    .then((authUser) => {
      history.push("/home"); //This causes the current component to unmount
      setAuthUser(authUser); //This is an async action, you are trying to set state on an unmounted component.
    })
    .catch((error) => {
      setError(error);
      console.log(error);
    });
};

Answer 3

未安装的组件是您的 SignUpPage 组件。 找到在挂载上使用它的组件时停止 onSubmit 的方法。 First of all, run a cleanup function when the component that uses this function and this onSubmit on mounts, so place the cleanup function inside onSubmit and return it so return a value inside useEffect and that value is a function and then when the component that uses此 useEffect 触发返回清理 function。 您可以创建类似 AbortController() 的内容来捕获错误并更新 state。