React嵌套数组/对象映射仅显示总计信息，求错误排查

核心错误：误用forEach替代map #

forEach方法仅执行遍历逻辑，不会返回任何值，React无法识别它的执行结果来渲染元素。同时你在forEach回调里的代码逻辑也无效：Object.keys(configData.config).map(...)的返回结果没被收集，后面的<>片段也无法被React捕获，因为forEach不会处理回调的返回值。

修正后的代码 #

return orders.map((item) => {
  return (
    <ul key={item.id}> {/* 给外层列表项加唯一key */}
      {item.configs.map((configData) => ( // 替换forEach为map，添加key
        <li key={configData.id}>
          {/* 渲染configData基础信息 */}
          <span>{configData.date}</span>
          <h1>{configData.name}</h1>
          <span>{configData.totalConfigPrice}</span>
          <span>{configData.waitingTime}</span>
          
          {/* 渲染具体配置项，用内层ul做层级区分 */}
          <ul>
            {Object.keys(configData.config).map((configItem) => (
              <li key={configItem}> {/* 用配置项的key作为唯一标识 */}
                <span>{configData.config[configItem].name}</span>
                <span>{configData.config[configItem].price}</span>
                <span>{configData.config[configItem].value}</span>
                <span>{configData.config[configItem].waitingTime}</span>
              </li>
            ))}
          </ul>
        </li>
      ))}
      
      {/* 修正HTML语义：ul下直接放span不符合规范，放到li里 */}
      <li>
        <span>{item.totalPrice}</span>
        <span>{item.totalQuantity}</span>
        <span>{item.waitingTime}</span>
      </li>
    </ul>
  );
});

额外调整说明 #

• 给所有列表元素添加了key属性，符合React列表渲染的要求，避免控制台警告。
• 调整了DOM结构，修复了<ul>直接包含<span>的语义错误。
• 拆分了配置项的层级，用内层<ul>包裹具体配置，页面结构更清晰。

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