Reactjs 数据检索时不更新的反应状态

当我的React应用程序从firebase从身份验证状态更改中获取用户信息时，它没有更新（重新呈现）。我环顾四周，人们说auth状态监听器必须绑定到对象，我已经这样做了。可以想象，这里的输出是

无用户

然后

找到的用户：

，但是

找到的用户

永远不会被渲染

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>
     );
  }
}

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
用户：props.user
};
firebase.auth（）.onAuthStateChanged（函数（用户）{
this.state={user:user}；
log（“找到的用户：+user.displayName”）；
}.约束（这个）；
}
render（）{
console.log（this.state.user？“找到用户”：“没有用户”）；
返回(
{this.state.user？this.state.user.displayName:“无用户！”}
);
}
}

将网络呼叫放入

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>
    );
  }
}

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
用户：props.user
};
}
componentDidMount（）{
firebase.auth（）.onAuthStateChanged（函数（用户）{
this.setState（{user:user}）；
log（“找到的用户：+user.displayName”）；
}.约束（这个）；
}
render（）{
console.log（this.state.user？“找到用户”：“没有用户”）；
返回(
{this.state.user？this.state.user.displayName:“无用户！”}
);
}
}

将网络呼叫放入

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>
    );
  }
}

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
用户：props.user
};
}
componentDidMount（）{
firebase.auth（）.onAuthStateChanged（函数（用户）{
this.setState（{user:user}）；
log（“找到的用户：+user.displayName”）；
}.约束（这个）；
}
render（）{
console.log（this.state.user？“找到用户”：“没有用户”）；
返回(
{this.state.user？this.state.user.displayName:“无用户！”}
);
}
}

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

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

---

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

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

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

---

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

我之前调用了

setState

，但得到一个错误，认为该方法不存在。@RyanCocuzzo请尝试我刚才在更新的答案中输入的代码。没有理由你应该得到错误，如果你有上述，让我知道如果你做了，它通过。我没碰到过。为什么安装组件后需要监听<代码>设置状态在构造函数中时也会抛出。请注意，如果允许，我将接受答案。

setState

在构造函数中还不存在，因为类的该部分尚未由React包装器初始化。在

componentDidMount

中执行此操作的原因是，您不会因为等待

构造函数中的网络调用而阻止整个应用程序的呈现。实际上，我不确定您是否可以在构造函数中等待网络调用，在React中正确修改状态的唯一方法是通过
setState
。在您当前的代码中，构造函数返回初始状态的时间远早于您的网络调用返回有趣的时间，当然值得注意。我之前调用了
setState
，但得到一个错误，即该方法不存在。@RyanCocuzzo请尝试我刚才在更新的答案中输入的代码。没有理由你应该得到错误，如果你有上述，让我知道如果你做了，它通过。我没碰到过。为什么安装组件后需要监听<代码>设置状态

在构造函数中时也会抛出。请注意，如果允许，我将接受答案。

setState

在构造函数中还不存在，因为类的该部分尚未由React包装器初始化。在

componentDidMount

中执行此操作的原因是，您不会因为等待

构造函数中的网络调用而阻止整个应用程序的呈现。实际上，我不确定您是否可以在构造函数中等待网络调用，在React中正确修改状态的唯一方法是通过
setState
。在您当前的代码中，构造函数在您的网络调用返回之前返回初始状态。
updateValue = (user) => {
    this.setState({ user })
}