当道具值改变时更新组件

时间:2016-07-28 19:53:19

标签: javascript reactjs

我有一个属性为home.ready = false的对象。当对象完成获取数据,清理它等后,它将更改为home.ready= true

我需要我的组件来注册更改和更新。我的组成部分:

 class HomeNav extends React.Component {
      render() {
          let data = this.props.data;
          let uniqueTabs = _.uniq(_.map(data, x => x.tab)).sort();

          let tabs = uniqueTabs.map((tab, index) => {
              let itemsByTab = _.filter(data, (x => x.tab == tab));
              return <Tabs key={tab} tab={tab} index={index} data={itemsByTab} />;
          });
          console.log(this.props)
          return (
              <section>
                  <div className="wb-tabs">
                      <div className="tabpanels">
                        { this.props.ready ? {tabs} : <p>Loading...</p> }
                      </div>
                  </div>
              </section>
          )
      }
  };

ReactDOM.render(
  <HomeNav data={home.data.nav} ready={home.ready}/>,
  document.getElementById('home-nav')
);

这是home object。它是一个获取数据的简单对象,一旦数据准备就绪,属性ready就会从false更改为true。我无法让React认识到这种变化。有时React会说home未定义。

1 个答案:

答案 0 :(得分:1)

由于您没有在请求或数据格式化过程中发布任何代码,我将假设您已经弄明白了。因此,为了使您的组件按照当前编写的方式工作,您需要删除大括号JMenuBarJCheckBoxMenuItems),然后,tabs应始终包含有效的数组,否则当你尝试排序,过滤等时它会破裂。

,您可以根据{ this.props.ready ? tabs : <p>Loading...</p> }属性提前退学:

this.props.data