javascript - 数据无法从 React/Flux 应用程序中的 API 更新

Question

我在一个项目的前端使用 React + Flux，我需要获取用户名以将其显示在侧边栏上。

问题:我在 es6 类的构造函数中调用操作，该操作从 API 获取所需的数据，并且我可以看到它从 onUserStateChanged 方法记录到控制台，但它渲染方法中的状态不会更新。我不明白如何让状态更改反射(reflect)在组件中。

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

从 onUserStateChange() 调用 console.log 包含从 API 返回的正确状态，而渲染中的 console.log 仅包含显示一个空白的 JS 对象

Answer 1

您可能想使用 setState

正如文档所述:

NEVER mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.

<小时/>

此外，您的构造函数似乎很奇怪，您是否真的打算不使用 UserActions.getCurrentUser(); 的结果

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