Question

我正在项目的前端使用React + Flux，我需要获取用户名以在侧栏上显示它。

问题：我在es6类的constructor中调用了从API获取所需数据的操作，我可以看到它从onUserStateChanged方法登录到控制台，但它没有在render方法中的状态更新。我不明白我如何能够在组件中反映出状态变化。

export default class extends React.Component {
  constructor() {
    super();
    UserActions.getCurrentUser();
    this.state = {
      user: {}
    };
  }

  componentDidMount() {
    UserStore.addChangeListener(this.onUserStateChange);
  }
  componentWillUnmount() {
    UserStore.removeChangeListener(this.onUserStateChange);
  }

  onUserStateChange() {
    console.log('called');
    this.state = {
      user: UserStore.getCurrentUser()
    };
    console.log(this.state);
  }

  render(){
    var _this = this;
    return (
        console.log(this.state);
        <div>{_this.state.user.username}</div>
    );
  }
}

来自console.log的对onUserStateChange()的调用包含来自API的正确状态，而渲染中的console.log只显示空白的JS对象

Answer 1

您可能想要使用setState

正如文件所说：

不要直接改变this.state，因为之后调用setState（）可能会替换你所做的突变。把this.state看作是不可变的。

你的构造函数看起来很奇怪，你真的打算不使用 UserActions.getCurrentUser();的结果

UserActions.getCurrentUser();
this.state = {
  user: {}
};

React / Flux应用程序中的数据不会从API更新

1 个答案: