React.js嵌套数组对象渲染问题：分类筛选组件无输出

问题原因 #

1. 外层map未返回渲染结果：原代码在外层map的回调函数中用额外花括号包裹判断逻辑，导致没有返回内层map生成的JSX元素，React无法渲染任何内容。
2. 选中状态判断错误：checked属性误将整个selectedOptions数组用作判断依据，实际应该使用当前筛选项的selectedOptions子数组。

修复后的基础代码 #

<div className="product-catres">
  {selectedOptions && selectedOptions.length > 0 &&
    selectedOptions.map((option) => {
      // 去掉多余花括号，直接返回符合条件的渲染结果
      if (option.filter_name === selectedCategory.filter_name) {
        return option.filter_options.map((filterOption) => {
          return (
            <div key={filterOption.value} className="pcoption">
              <div className="form-check">
                <label className="form-check-label">
                  <input
                    className="form-check-input"
                    type="checkbox"
                    onChange={() => handleSelectedFilterOptions(filterOption.value)}
                    checked={option.selectedOptions?.includes(filterOption.value) || false}
                  />
                  {filterOption.label}
                  {/* 可选：显示商品数量 */}
                  <span className="count">({filterOption.count})</span>
                </label>
              </div>
            </div>
          );
        });
      }
      return null;
    })}
</div>

优化方案（更简洁清晰） #

先过滤出目标筛选项再单独渲染，减少嵌套判断，提升代码可读性：

// 提前过滤出匹配selectedCategory的筛选项
const targetFilter = selectedOptions.find(
  item => item.filter_name === selectedCategory.filter_name
);

<div className="product-catres">
  {targetFilter?.filter_options.map((filterOption) => (
    <div key={filterOption.value} className="pcoption">
      <div className="form-check">
        <label className="form-check-label">
          <input
            className="form-check-input"
            type="checkbox"
            onChange={() => handleSelectedFilterOptions(filterOption.value)}
            checked={targetFilter.selectedOptions.includes(filterOption.value)}
          />
          {filterOption.label}
          <span className="count">({filterOption.count})</span>
        </label>
      </div>
    </div>
  ))}
</div>

优化点说明 #

• 提前过滤数据：用find替代map内的条件判断，减少不必要的遍历，逻辑更直观。
• 变量命名规范：内层循环变量改用filterOption，避免和外层option重名，防止混淆。
• 简化条件判断：用可选链?.处理空值场景，checked直接返回布尔值，去掉冗余的三元表达式。

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