Question

我当前正在尝试使用react-redux来订阅存储newsItems更改的更改。我当前的组件正在运行，但没有监听商店更改，因为它看起来像：

class Home extends Component {
  state = { loading: false };
  displayName = Home.name

  render() {
    let contents = this.renderContents(store.getState().newsItems);

    return (
      <div>  
        {contents}
      </div>
    );
  }

  renderContents = (newsItems) => {
    var largeNewsItems = newsItems.splice(0, 2);
    var firstNewsItem = largeNewsItems[0];
    var secondNewsItem = largeNewsItems[1];

    return (
          <div>
            <div>
              <LargeNewsItem newsItem={firstNewsItem} />
            </div>
            <div>
              <LargeNewsItem newsItem={secondNewsItem} />
            </div>
          </div>
    );
  }
}

export default Home;

当尝试更新它以订阅商店时，我做了以下尝试：

class Home extends Component {
  state = { loading: false };
  displayName = Home.name

  render(props) {
    let contents = this.renderContents(props.newsItems);

    return (
      <div>  
        {contents}
      </div>
    );
  }

  renderContents = (newsItems) => {
    var largeNewsItems = newsItems.splice(0, 2);
    var firstNewsItem = largeNewsItems[0];
    var secondNewsItem = largeNewsItems[1];

    return (
          <div>
            <div>
              <LargeNewsItem newsItem={firstNewsItem} />
            </div>
            <div>
              <LargeNewsItem newsItem={secondNewsItem} />
            </div>
          </div>
    );
  }
}

const mapStateToProps = function(state) {
  return {
    newsItems: state.newsItems
  }
}

export default connect(mapStateToProps)(Home);

这会导致错误：

TypeError：无法读取未定义的属性“ newsItems”

我叫props.newsItems的地方。

我在这里做错了什么，我该如何解决？

更新：看来我可以通过使用以下方法克服它： `render（）{ 让内容= this.renderContents（this.props.newsItems）;

return (
  <div>  
    {contents}
  </div>
);

}`

但是我的LargeNewsItem组件会不时地传递空数据。我该如何克服这个问题，实际上是“等待”直到填充newsItems

Answer 1

一种方法可能是替换您的render方法，如下所示。

`

render() {
const newsItems = this.props.newsItems;
if(!newsItems) {
return null;
}
    let contents = this.renderContents(this.props.newsItems);

    return (
      <div>  
        {contents}
      </div>
    );
  }`

这样，如果newsitems为null，您将不会收到错误消息，一旦newsitems uddates，您的render方法将再次被调用

React：订阅Redux存储更改的组件

1 个答案: