javascript - 当 prop 值改变时更新组件

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

由于您没有围绕请求或数据格式发布任何代码，我假设您已经弄清楚了所有问题。因此，为了让您的组件按照当前编写的方式工作，您需要删除 tabs 周围的大括号。 ({ this.props.ready ? tabs : <p>Loading...</p> })，然后，this.props.data应始终包含有效的数组，否则当您尝试排序、过滤等时它将中断。

<小时/>

或者，您可以根据 ready 提前退出属性:

class HomeNav extends React.Component {
      render() {
          if(!this.props.ready){
              return <section>
                  <div className="wb-tabs">
                      <div className="tabpanels">
                          <p>Loading...</p>
                      </div>
                  </div>
              </section>
          }

          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">
                        {tabs}
                      </div>
                  </div>
              </section>
          )
      }
  };