Reactjs 反应：组件订阅redux存储更改

我目前正在尝试使用

react redux

订阅

新闻项目的存储更改。我的当前组件正在工作，但未按应有的方式侦听存储更改，如下所示：

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;

}`

但是，my
LargeNewsItem
组件偶尔会被传递一次空数据。如何克服这一问题，并在填充
新闻项之前基本上“等待”
一种方法是如下所示替换渲染方法

`

render（）{
const newitems=this.props.newitems；
如果（！新闻项）{
返回null；
}
让contents=this.renderContents（this.props.newitems）；
返回(
{contents}
);
}`

这样，如果您的新闻项为null，则不会出现错误，并且一旦新闻项为uddates，将再次调用渲染方法
您使用的是组件类，而不是无状态组件（函数）。在无状态版本中，您将props作为参数传递，但在组件中，
props
是一个字段。渲染应该是
Render（）
并访问
this.props
以获取道具。您可能忘记了
this.props
的
this
关键字。未使用任何参数调用Render。如果您只想渲染没有本地状态的现有道具，可以使用功能组件。对于更新后的问题，只需检查
新闻项
是否为null或未定义，然后才呈现内容为什么不将组件连接到redux存储？使用连接功能react redux
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);

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

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

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