javascript - ReactJS: Reload component if variable changes value - Stack Overflow

admin管理员组

文章数量:1296844

In my main ponent <App /> of my meteorJS application I'm using some user data (const user = Meteor.user()). If the user-object has a check value <AnotherComponent /> will be used. There the user can do some interaction and the check field gets removed from user document.

To make it a bit clearer: The check value will be removed on another place by updating the value in the db.

Now I would expect, that now <MainComponent /> will be rendered. But it won't. I need to reload the page to get it.

Is there a way how I can make the user variable 'reactive'?

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

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

In my main ponent <App /> of my meteorJS application I'm using some user data (const user = Meteor.user()). If the user-object has a check value <AnotherComponent /> will be used. There the user can do some interaction and the check field gets removed from user document.

To make it a bit clearer: The check value will be removed on another place by updating the value in the db.

Now I would expect, that now <MainComponent /> will be rendered. But it won't. I need to reload the page to get it.

Is there a way how I can make the user variable 'reactive'?

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

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

• javascript
• reactjs
• meteor

Share Improve this question Follow asked Aug 10, 2017 at 20:21 user3142695user3142695 17.4k5555 gold badges194194 silver badges375375 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

if you want to reload a render, your ponent has need a variable in a state that can be change. Or receive some new props.

In your case, this is normal you've to reload the page.

if you want to run render() in App ponent, you need to store the user in a state, and find a way to call Meteor.user again to retrieve some new data and replace in the user state. If the state.user has changed, then, your ponent will be rerendering.

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./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>

Try moving the user declaration into state. That way, when Meteor.user() updates, it will update state and trigger a re-render.

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

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

本文标签： javascriptReactJS Reload component if variable changes valueStack Overflow