警告：无法在未安装的组件上执行反应状态更新

Question

当我在屏幕之间旋转时，我有一个警告，我试图解决该问题，但未成功。通常这不是第一次，而是其他时间。我知道这和一定的时间有关，但是如果有人可以帮助我，我会很高兴的。我在这里搜索了答案，但没有找到与我的代码相似的内容

state = { email: '', password: '', error: '', loading: false };

constructor(props)
{
  super(props);
  this.state = {
    loggedin: false
};
//this.registerUser('[email protected]', 'fffhhhhff');
var that = this;    
f.auth().onAuthStateChanged(function(user) {
  if(user){
    //Logged in
    that.setState({
      loggedin: true
    });
    console.log('Logged in', user);
  }
  else{
    //Logged out
    that.setState({
      loggedin: false
    });
    console.log('Logged out');
  }
});
}

loginUser = async(email, pass) => {

if(email != '' && pass != ''){
  //
  try{
    let user = await auth.signInWithEmailAndPassword(email, pass);
    console.log(user);
  } catch(error){
    console.log(error);
  }
}
else{

  //if they are empty
  alert('Missing email or password')
}
}

registerUser = (email, password) => {

console.log(email, password);
auth.createUserWithEmailAndPassword(email, password)
.then((userObj) => console.log(email, password, userObj))
.catch((error) => console.log('error logging in', error));

}

signUserOut = () => {
auth.signOut()
.then(() => {
  console.log('Logged out...');
}).catch((error) => {
  console.log('Error', error);
});
}

render（）{

return (
  <View>
    { this.state.loggedin == true ? (
      <View>
        <CardSection>
          <Button
            onPress = { () => this.signUserOut() }>
            Log Out
          </Button>
        </CardSection>
        <CardSection>
          <Text>Logged in....</Text>
        </CardSection>
      </View>
    ) : (
      <View>
        { this.state.emailloginView == true ? (
         <Card>
          <CardSection >
            <Input
              placeholder="[email protected]"
              lable="Email"
              value = {this.state.email}
              onChangeText = {email => this.setState({ email })}
            />
          </CardSection>
          <CardSection>
            <Input
              secureTextEntry
              placeholder="password"
              lable="Password"
              value = {this.state.password}
              onChangeText = {password => this.setState({ password })}
            />
          </CardSection>
          <CardSection>
            <Button
              onPress = { () => this.loginUser(this.state.email , this.state.password) }>
              Login
            </Button>
          </CardSection>
        </Card>
        ): (
          <View>

          </View>
        )}
        { this.state.emailloginView != true ? (
        <CardSection>
          <Button
            onPress = { () => this.setState({emailloginView: true})}>
            Login With Email
          </Button>
        </CardSection>
        ) : (
          <View>

          </View>
        )} 
      </View>
    )}
  </View>

Answer 1

这在您调用setState时发生，但是您的组件已卸载。例如，当您不在f.auth().onAuthStateChanged(callback)界面时，可能会收到回调。为了以一种干净的方式解决问题，可以使用如下所示的钩子：

   const [isLoggedIn, setIsLoggedIn] = useState(false);
   useEffect(() => {
      let isMounted = true;
      f.auth().onAuthStateChanged(function(user) {
        if(!isMounted){
          return;
        }
        if (user) {
          setIsLoggedIn(true);
        } else {
          setIsLoggedIn(false);
        }
      });
      return ()=>{
        isMounted = false;
      }
    }, []);

顺便说一句，更好的解决方案是在离开页面时取消请求。