javascript - 历史钩子 React 发出警告。这是一个无操作，但它表明您的应用程序中存在内存泄漏

Question

在制作项目的过程中，我遇到了 React hooks 的问题。

我使用 useEffect 将 UI 重新呈现给用户分类，我使用 let history = useHistory() 来完成它，在代码部分：

if (isAuthenticated() && isAuthenticated().role === 1) {
                         //! Redirect to Admin dashboard
                         console.log('Redirect to Admin dashboard');
                         history.push('/admin/dashboard'); //! I found that using this code will cause a warning
                     } else {
                         //! Redirect to User dashboard
                         console.log('Redirect to User dashboard');
                         history.push('/user/dashboard'); //! I found that using this code will cause a warning
                     }

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

我的完整代码：

const Signin = () => {
    let history = useHistory();

    //! Check Authenticated after Component does Mount
    useEffect(() => {
            if (isAuthenticated() && isAuthenticated().role === 1) {
                //! Redirect to Admin dashboard
                history.push('/admin/dashboard');
            } else if (isAuthenticated() && isAuthenticated().role === 0) {
                //! Redirect to User dashboard
                history.push('/user/dashboard');
            }
    }, [history]);

    const [formData, setFormData] = useState({
        username: "",
        email: "",
        password: "",
        errorMsg: false,
        loading: false
    });
    
    const { username, email, password, errorMsg, loading } = formData;

    const handleSubmit = (e) => {
        e.preventDefault();
        //! client validation
        if (isEmpty(email) || isEmpty(password)) {
            setFormData({...formData, errorMsg: "Enter your information"});
        } else if (!isEmail(email)) {
            setFormData({...formData, errorMsg: "Email invalid"});
        } else {
            setFormData({...formData, loading: true});

            // Send data to server
            const data = { user : { email, password } };
            signin(data) //! return response
                .then(response => {

                    setAuthentication(response.data.token, response.data.user);

                    if (isAuthenticated() && isAuthenticated().role === 1) {
                        //! Redirect to Admin dashboard
                        history.push('/admin/dashboard');
                    } else {
                        //! Redirect to User dashboard
                        history.push('/user/dashboard');
                    }

                    setFormData({
                        ...formData,
                        loading: false,
                    });
                })
                .catch(error => {
                    setFormData({
                        ...formData,
                        loading: false,
                        errorMsg: error.response.data.errorMessage
                    });
                });
        }
    }

    const handleChange = (e) => {
        setFormData({
            ...formData,
            [e.target.name]: e.target.value,
            errorMsg: ""
        });
    }

    // View
    
const showSigninForm = () => (
    <form className="signin-form" onSubmit={handleSubmit} noValidate>
        <h4 className="d-flex justify-content-center mb-4">Đăng nhập</h4>
        {/* email */}
        <div className="form-group input-group">
            <div className="input-group-prepend">
                <span className="input-group-text">
                    <i className="fa fa-envelope"></i>
                </span>
            </div>
            <input
                type="email"
                name="email"
                value={email}
                onChange={handleChange}
                className="form-control"
                placeholder="Email address"
            />
        </div>
        {/* password */}
        <div className="form-group input-group">
            <div className="input-group-prepend">
                <span className="input-group-text">
                    <i className="fa fa-lock"></i>
                </span>
            </div>
            <input
                type="password"
                name="password"
                value={password}
                onChange={handleChange}
                className="form-control"
                placeholder="Password"
            />
        </div>
        {/* submit */}
        <button type="submit" className="btn btn-primary btn-block">Đăng nhập</button>
        <p className="forgot-password text-right" style={{color: 'white'}}>
            Bạn chưa có tài khoản?
            <Link to="/signup" className="ml-2">Đăng ký</Link>
            <Link to="/password" className="ml-2">Quên mật khẩu</Link>
        </p>
    </form>
);

return (
    <div className="signin-container">
        <div className="row px-4 vh-100">
            <div className="signin-form col-sm-8 col-md-6 mx-auto">
            {loading && (
                <div className="text-center">
                    {showLoading()}
                </div>
                )
            }
            {errorMsg && showErrorMsg(errorMsg)}
            {showSigninForm()}
            </div>
        </div>
    </div>
);
};

export default Signin;

标签： javascriptreactjs

Answer 1

你只需要在 useEffect 中进行清理，我认为可以摆脱这个错误。

useEffect(() => {
  let isMounted = true;               // note mutable flag
     if (isAuthenticated() && isAuthenticated().role === 1) {
            //! Redirect to Admin dashboard
            history.push('/admin/dashboard');
        } else if (isAuthenticated() && isAuthenticated().role === 0) {
            //! Redirect to User dashboard
            history.push('/user/dashboard');
        }
  return () => { isMounted = false }; // cleanup toggles value, if unmounted
}, [history]);