Question

我正在尝试向组件发送一堆道具。

在console.logs中，我注意到一切都按预期工作，每个对象都有其正确的值，每个传播操作都在工作。但是我的名片未显示在页面中。这样正确吗？

        return ( 
            <div>
                {this.state.articles.forEach((card) => {
                    <ArticleCard {...card} />
                })}
            </div>
        )

Image showing the problem

Answer 1

Array.forEach不返回任何内容。您需要使用Array.map。另外，您应该返回要在回调中呈现的组件。

return ( 
  <div>
      {this.state.articles.map((card) => (
          <ArticleCard {...card} />
      )}
  </div>
)

Answer 2

您应该在数组上使用map函数，而不要使用forEach，并使用return关键字返回每个ArticleCard

return( 
<div>
  {this.state.articles.map((card) => {
    return <ArticleCard {...card} />
  })}
</div>
)

将道具传播到组件列表

2 个答案: