道具值更改时更新组件

Update component when prop value changes

本文关键字：更新 组件      更新时间：2023-09-26

我有一个属性为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')
);

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

由于您没有发布任何关于请求或数据格式的代码，我认为您已经解决了所有问题。因此，为了使组件按照当前的编写方式工作，您需要在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>
          )
      }
  };
相关文章：