React JSX中.map嵌套.filter匹配两数组同ID项渲染问题

核心逻辑是在遍历分类数组的每一项时，用当前项的id对第二个数组做筛选，拿到所有关联的筛选项后再做二次遍历渲染，注意JSX返回的元素需要包裹在单个根节点下，列表渲染必须加唯一key属性。

{
  filterListDataName &&
    filterListDataName.map(function (item) {
      // 筛选当前分类下的所有筛选项
      const relatedOptions = filterListDataText.filter(
        (option) => option.filter_name_id === item.id
      );
      return (
        <div key={item.id} className="filter-block">
          <label>{item.name}</label>
          {/* 遍历渲染筛选出的关联项，可根据业务需求替换为checkbox/radio等控件 */}
          <div className="option-list">
            {relatedOptions.map((opt) => (
              <span key={opt.text} className="option-item">
                {opt.text}
              </span>
            ))}
          </div>
        </div>
      );
    }.bind(this))
}

优化写法参考 #

• 原代码直接返回<label>后追加内容会触发JSX语法错误，必须用单个父标签（或React.Fragment空标签）包裹同组的分类名和对应筛选项
• 列表渲染的key属性优先用数据自带的唯一id，示例中子项没有单独id，用不重复的text字段临时替代即可
• 如果使用ES6箭头函数，可以直接去掉末尾的.bind(this)，箭头函数会自动继承外层上下文，搭配可选链?.代替原来的&&空值判断，写法更简洁：

{
  filterListDataName?.map(item => {
    const relatedOptions = filterListDataText.filter(opt => opt.filter_name_id === item.id);
    return (
      <div key={item.id} className="filter-block">
        <label>{item.name}</label>
        <div className="option-list">
          {relatedOptions.map(opt => <span key={opt.text}>{opt.text}</span>)}
        </div>
      </div>
    )
  })
}

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