React/JSX中过滤双数组渲染内容失败问题排查

嘿，这个问题的核心在于你用错了数组方法——forEach和filter都没法帮你生成React需要渲染的元素数组，咱们一步步拆解：

原代码的问题 #

1. forEach的坑：
   forEach只是用来遍历数组执行操作的工具，它没有返回值（或者说返回undefined）。哪怕你在forEach的回调里写了返回JSX的逻辑，这些JSX也不会被收集起来交给React渲染，相当于白写了。

2. filter的误用：
   filter的本职工作是筛选数组元素，它的回调函数需要返回布尔值来决定是否保留当前元素。你在回调里返回JSX完全没用，filter只会把符合条件的原数组元素（也就是e）返回，根本不会处理你写的DOM结构。

这就是为什么控制台能打印出正确的true和Label值，但UI上什么都不显示——你根本没把生成的JSX交给React去渲染。

修改后的代码为什么能解决问题 #

你换成map就找对方向了！map方法的核心作用就是遍历数组，把每个元素经过处理后的结果（这里就是你要的JSX）收集成一个新数组返回，React可以直接接收这个数组并渲染里面的元素。

不过这里可以再优化一下，避免嵌套map产生多余的undefined（当e !== interest._id时，map会返回undefined），推荐先筛选再映射的写法：

event && interests && interests
  // 先筛选出event.Interests里包含对应_id的interest
  .filter(interest => event.Interests.includes(interest._id))
  // 再直接映射成需要的JSX结构
  .map((interest, index) => (
    <div 
      key={index} 
      className={classNames(classes.categoryContainer, classes.leftPadding)}
    >
      <div className={classes.categoryWrapLower}>
        <p>{interest.Label}</p>
      </div>
    </div>
  ))

这样代码更简洁高效，也不会产生无用的undefined元素，渲染逻辑更清晰。

内容的提问来源于stack exchange，提问作者Brandon