时间戳

首页 > 解决方案 > react中的组件不在foreach循环中执行

javascript - react中的组件不在foreach循环中执行

问题描述

const Course = props => {
  props.courses.forEach(course =>
  <Header name={course.name}/>
  )
  ...
}

此代码根本不执行 Header。如果我将循环更改为course => console.log(course.name)，它会按预期工作并且数据是正确的。这是怎么回事？

标签： javascriptreactjs

解决方案

forEach不会返回任何内容，因此您将绝对可以遍历每个课程，但是您不会因此而提供任何要渲染的内容。

将你切换forEach到类似的东西map，它会根据你从函数返回的任何内容返回一个元素数组，在这种情况下，它会提供一个要渲染的元素数组。

您还缺少Course组件的返回，因此请确保也将其添加。

例如：

const Course = props => {
  return props.courses.map(course =>
    <Header name={course.name}/>
  );
}

在 React 中使用组件数组时，还有一些其他的事情需要牢记，所以如果你想了解更多信息，请查看React 文档中的Lists and Keys。

推荐阅读