ReactJS：如果变量更改值，则重新加载组件

Question

在我<App />的meteorJS 应用程序的主要组件中，我使用了一些用户数据（const user = Meteor.user()）。如果user-object 有一个check值<AnotherComponent />将被使用。用户可以在那里进行一些交互，并且该check字段会从user文档中删除。

更清楚一点：check通过更新数据库中的值，该值将在另一个地方被删除。

现在我希望，现在<MainComponent />将被渲染。但不会。我需要重新加载页面才能获得它。

有没有办法让user变量“反应”？

class App extends Component {
  render () {
    const user = Meteor.user()

    if (user && user.check) {
      return (<AnotherComponent />)
    }
    return (<MainComponent />)
  }
}

Answer 1

尝试将用户声明移至状态。这样，当 Meteor.user() 更新时，它将更新状态并触发重新渲染。

class App extends Component {
  constructor(){
    super();
    this.state = {
       user: Meteor.user()
    }
  }
  render () {
    const { user } = this.state;

    if (user && user.check) {
      return (<AnotherComponent />)
    }
    return (<MainComponent />)
  }
}