React中如何在循环内渲染函数组件？解决语法错误问题

你遇到的语法错误主要是内层遍历的回调函数没有正确闭合，且JSX的放置位置逻辑混乱，导致React解析器无法识别正确的语法结构。我来帮你拆解问题并修正代码：

错误根源分析 #

1. 你在内层reducedData[obj].map(item => { ... })的回调里，写完row的赋值逻辑后直接插入了<MyShadyabsRow/>，但这个回调既没有return语句，也没正确闭合括号，JSX的位置完全错误——你应该在处理完当前obj对应的所有item之后，再返回组件，而非嵌套在内层遍历里。
2. 外层的Object.keys(reducedData).map遍历返回组件时，缺少React列表渲染强制要求的key属性，这不仅会触发警告，也可能导致渲染异常。

修正后的代码 #

render() {
  const { coupons } = this.state;

  return (
    {/* 这里替换成你的外层容器，比如table */}
    <table>
      {coupons.length > 0 ? (
        Object.keys(reducedData).map(objKey => {
          // 初始化row对象
          const row = { title: '', coupon_code: '' };
          // 遍历当前分组下的所有item，处理row数据
          reducedData[objKey].forEach(item => {
            // 注意：当前逻辑会让title被最后一个item覆盖，若所有item title相同可优化为取第一个
            row.title = item.title;
            row.coupon_code += item.coupon_code;
          });
          // 处理完当前分组后，返回组件并添加唯一key
          return <MyShadyabsRow key={objKey} row={row} />;
        })
      ) : (
        // 无优惠券时显示的空行
        <tr></tr>
      )}
    </table>
  );
}

额外优化建议 #

• 如果同一分组内的item title是相同的，没必要循环覆盖，直接取第一个item的title即可：row.title = reducedData[objKey][0]?.title || ''，提升代码效率。
• 用forEach替代内层map处理row赋值，因为你不需要内层遍历返回结果，forEach的语义更贴合“仅执行逻辑”的场景。
• 替换var为const/let，符合现代JavaScript规范。

内容的提问来源于stack exchange，提问作者S.M_Emamian