Question

我正在尝试在React中呈现项目列表。我循环遍历包含所有可能值interests的列表，并将其与具有这些值event.Interests的子集的另一个列表进行比较。我将子集列表中保存的_id与完整列表中的_id进行比较。

{console.log(e === interest._id)}返回true 5次，如果记录，则返回interest.Label，将返回每个值的名称。

但是，在UI中根本没有渲染。

event && interests && interests.forEach(interest => (
  event.Interests.filter((e, i) => {
    {console.log(e === interest._id)}
    if (e === interest._id) {
      return <div key={i} className={classNames(classes.categoryContainer, classes.leftPadding)}>
        <div className={classes.categoryWrapLower}>
          <p>{interest.Label}</p>
        </div>
      </div>
    }
  })
))

我做错了什么？

更新

根据samanime发布的建议，我更改了forEach，奇怪的是，过滤到map并且效果很好。

      event && interests && interests.map(interest => (
        event.Interests.map((e, i) => {
          {console.log(e === interest._id)}
          if (e === interest._id) {
            return <div key={i} className={classNames(classes.categoryContainer, classes.leftPadding)}>
              <div className={classes.categoryWrapLower}>
                <p>{interest.Label}</p>
              </div>
            </div>
          }
        })
      ))

Answer 1

将您的forEach()更改为map()。

forEach()函数没有返回值，因此如果从那里返回任何内容，它就会被丢弃。

map()函数将收集所有返回的值（如果您没有返回任何内容，则包括undefined）并将它们作为数组返回。

在您的情况下，您需要使用map()，然后在地图后添加.filter(Boolean)，以便在您不返回任何内容的情况下删除所有undefined。

event && interests && interests.map(interest => /* your code */).filter(Boolean)

过滤2个数组以在React / JSX

1 个答案: