过滤 2 个数组以在 React/JSX 中呈现一个值答案

【问题标题】：Filtering 2 arrays to render a value in React/JSX过滤 2 个数组以在 React/JSX 中呈现一个值
【发布时间】：2023-03-03 03:54:01
【问题描述】：

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

{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>
          }
        })
      ))

【问题讨论】：

标签： javascript arrays reactjs filter jsx

【解决方案1】：

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

forEach() 函数没有返回值，所以如果你从那里返回任何东西，它就会被丢弃。

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

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

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

【讨论】：