ReactJS：変数が値を変更した場合のリロードコンポーネント

Question

私のmeteorJSアプリケーションの私の主要コンポーネント<App />で私はいくつかのユーザーデータ（const user = Meteor.user()）を使用しています。 userオブジェクトにcheck値がある場合は<AnotherComponent />が使用されます。ユーザーは何らかの対話を行うことができ、checkフィールドはuser文書から削除されます。

少し明確にする：checkの値は、dbの値を更新することによって別の場所で削除されます。

今私は、<MainComponent />がレンダリングされることを期待しています。しかし、それはしません。私はそれを得るためにページをリロードする必要があります。

どうすればを「反応性」変数にすることができますか？

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

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

Answer 1

ユーザー宣言をstateに移動してみてください。このようにして、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>