Question

我有一个属性为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未定义。

Answer 1

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

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

this.props.data

当道具值改变时更新组件

1 个答案: