Javascript 通过道具将内部组件链接到外部状态

我有一个

主页

，其中包含一个

文章列表

主页

进行网络调用，从网络获取一系列文章

然后将此数组添加到redux存储中

class HomePage extends React.PureComponent {
  componentDidMount() {
    dispatch(loadArticles()); // async network call to fetch articles
  }
  render() {
    <ArticleList articles={this.props.articles} />
  }
}

function ArticleList({articles}) { 
  return <div>articles.forEach(a => <Article value={a} />)</div>;
}

类主页扩展了React.PureComponent{
componentDidMount（）{
dispatch（loadArticles（））；//获取文章的异步网络调用
}
render（）{
}
}
函数ArticleList（{articles}）{
返回文章。forEach（a=>）；
}

---

鉴于

此.props.articles

将在

主页

呈现后的某个时间才会填充，那么上面的连线（即

）是否有效，或者是否需要向

articleslist

提供回调？

是

ArticleList

期望

articles

是一个数组，但它最初（在网络请求返回之前）设置为一个对象（根据控制台？！是

List

），这会导致proptype验证失败。我不知道是什么将此值设置为

列表

。我将存储中的初始值设置为空数组，因此这是意外的。我用的是传奇故事。可能有什么东西看到了初始的空数组并将其转换为

列表

？它完全可以工作，只需确保为

文章

道具设置默认值，以避免调用空值的

forEach

。此外，在该示例中不要使用

forEach

，因为它不会返回任何内容。你需要使用

map（）

：

{articles.map（a=>}

啊，这是调用

globalState.get（'articles'）

的结果。这是因为我使用的是Immutable.js，我需要在商店检索的结果上调用toJS。我想。