React嵌套循环内子组件未返回渲染问题排查

问题现象 #

• 嵌套遍历Products数据渲染ProductFeaturesCards组件时，第一层直接return组件的写法可以正常渲染，第二层遍历特征列表的写法始终无法渲染组件，控制台可正常打印遍历到的feature数据，但页面无对应内容。

问题根因 #

代码存在两处返回值断裂的问题，导致React拿不到要渲染的JSX元素：

1. 外层遍历方法用错：最外层遍历Products使用了forEach方法，该方法本身没有返回值（固定返回undefined），React无法从遍历结果中获取要渲染的元素列表。
2. 内层遍历结果未返回：就算替换外层遍历方法，if逻辑块中执行内层map生成的JSX数组，没有通过return交还给外层遍历的回调函数，最终返回给JSX渲染树的还是undefined。

你之前注释的第一层单组件return写法本身不符合React列表渲染规范，forEach回调中的return仅会终止当前项的遍历，不会把组件返回给外层渲染表达式，单条数据匹配时的渲染效果属于特殊场景下的巧合。

修复代码 #

将外层forEach替换为会返回新数组的map方法，同时在内层逻辑块中returnmap生成的元素数组，不匹配id的遍历项返回null即可：

import React from "react";
import ProductFeaturesCards from "./ProductFeaturesCards.js";
import { Products } from "../ProductsData.js";

const ProductFeatures = ({ className = "", id }) => {
  return (
    <section id='product-features' className={`${className}`}>
      <div className='container'>
        <div className='row d-flex justify-content-center'>
          <div className='col-lg-12 col-md-12 col-sm-12 col-12 py70'>
            <p className='features-title'>Product Features</p>
          </div>
        </div>
        <div className='row'>
          {Products.map((item, i) => {
            if (item.id === id) {
              // 向外返回内层map生成的元素列表
              return Object.values(item.Product_features[0]).map((feature, index) => {
                return <ProductFeaturesCards data={feature} key={index} />;
              });
            }
            // 非匹配项返回null避免渲染报错
            return null;
          })}
        </div>
      </div>
    </section>
  );
};

export default ProductFeatures;

优化建议 #

• 列表渲染的key属性不建议使用数组索引，优先用每个feature自带的唯一标识（比如featureId、featureName）作为key，避免列表增删时出现状态错乱、渲染异常问题。
• 不需要遍历全量Products数组找匹配项，可以先用find方法拿到对应id的产品，再遍历特征列表，代码可读性更高：

// 先匹配目标产品
const targetProduct = Products.find(item => item.id === id);

// 渲染位置直接判断后遍历
<div className='row'>
  {targetProduct && Object.values(targetProduct.Product_features[0]).map(feature => (
    <ProductFeaturesCards key={feature.id} data={feature} />
  ))}
</div>

内容的提问来源于stack exchange，提问作者Zabeeh Ullah Yousafxai