Question

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

为了使它更清晰：通过更新数据库中的值，将在另一个地方删除check值。

现在我希望，现在将呈现<MainComponent />。但它没有赢。我需要重新加载页面才能获得它。

我是否有办法制作user变量＆＃39;被动＆＃39;？

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

Answer 2

如果要重新加载渲染，则组件需要一个可以更改的状态的变量。或者收到一些新的道具。

在您的情况下，这是正常的，您需要重新加载页面。

如果要在App组件中运行render（），则需要将用户存储在某个状态，并找到再次调用Meteor.user的方法来检索一些新数据并替换为用户状态。如果state.user已更改，那么，您的组件将重新渲染。

class App extends Component {
  constructor() {
    super();
    this.state = {
      user: Meteor.user(),
    }
    this.smthChanging = this.smthChanging.bind(this);
  }
  
  smthChanging() {
    this.setState({
      user: Meteor.user(),
    });
  }
  
  render () {
    const { user } = this.state;

    if (user && user.check) {
      return (<AnotherComponent />)
    }
    return (
      <div>
        <button
         onClick={this.smthChanging}
        >
          reload user
        </button>
      </div>
    )
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

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

2 个答案: