Question

我的React应用程序从auth状态更改从Firebase获取用户信息时未更新（重新呈现）。我环顾四周，人们说auth状态侦听器必须绑定到该对象，这已经完成了。可以想象，这里的输出是NO USER!然后是Found user: <user name>，但是FOUND USER永远不会呈现。

class App extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      user: props.user
    };

    firebase.auth().onAuthStateChanged(function(user) {
        this.state = {user: user};
        console.log("Found user: " + user.displayName);
    }.bind(this));

  }

  render() {
    console.log(this.state.user ? "FOUND USER" : "NO USER");
    return (
      <div>{this.state.user ? this.state.user.displayName : "No user!"}</div>
     );
  }
}

Answer 1

将网络呼叫放入componentDidMount，然后使用setState。 this.state =不会导致重新渲染。

class App extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      user: props.user
    };
  }

  componentDidMount() {
    firebase.auth().onAuthStateChanged(function(user) {
        this.setState({user: user});
        console.log("Found user: " + user.displayName);
    }.bind(this));
  }

  render() {
    console.log(this.state.user ? "FOUND USER" : "NO USER");
    return (
      <div>{this.state.user ? this.state.user.displayName : "No user!"}</div>
    );
  }
}

Answer 2

将setState调用移到事件处理程序之外的单独方法中。

updateValue = (user) => {
    this.setState({ user })
}

然后从onAuthStateChanged事件处理程序内部调用updateValue方法。

反应状态不会在数据检索时更新

2 个答案: