Question

我得到＆＃34;警告：setState（...）：只能更新已安装或安装的组件。这通常意味着您在已卸载的组件上调用了setState（）。这是一个无操作。＆＃34;在登录页面上。我第一次登录时没有警告。如果我退出并重新登录，则会出现警告。如果我再次这样做，会出现2个警告，然后是3等等，依此类推。经过研究，这可能是因为组件中有回调函数，但我不确定如何解决它。我使用了一些旧的firebase代码，我从之前写过的其他内容中复制了代码，这也可能是问题。

handleClick(){
    ...
    firebase.auth().onAuthStateChanged(function(user) {
        if (user) {
            this.setState({redirect: true});
            console.log(user.uid);

        } else {
          // No user is signed in.
        }
      }.bind(this));




render() {
    if(this.state.redirect){
      console.log("Log in successful");
      return <Redirect to="/home" />
    }

    return (
      //sign in page
    )}

Answer 1

似乎正在复制onAuthStateChanged侦听器。试试这个：

this.auth = firebase.auth().onAuthStateChanged(
  function(user) {
    if (user) {
      this.setState({ redirect: true });
      console.log(user.uid);
    } else {
      // No user is signed in.
    }
  }.bind(this)
);

然后在组件卸载时取消订阅：

componentWillUnmount() {
  // Unsubscribe.
  this.auth();
}

Answer 2

这是因为无论您的组件状态如何（已安装，未安装等），您的firebase回调都会运行。您可能应该取消注册componentWillUnmount上的回调，以便在组件未安装时不会执行任何操作。

如何在ReactJS中修复登录页面的setState警告

2 个答案: