React自定义函数forEach遍历无返回值问题求助

你的自定义函数无法返回JSX内容是三个语法用法错误导致的：

• forEach 方法本身设计为仅执行遍历副作用，永远返回undefined，哪怕你在forEach外层写return，也拿不到任何JSX元素数组。
• forEach的回调函数里，你写的JSX被包裹在独立的花括号块中，没有任何return语句把JSX返回出去，相当于写了段没有被任何变量接收、也没有被返回的无效代码。
• 组件首次渲染时data是空数组，直接访问data[0]会触发类型错误，导致渲染逻辑中断。

• 替换遍历方法：将forEach替换为map，map会遍历数组并返回由回调返回值组成的新数组，完全符合React渲染列表的要求。
• 显式返回元素：在遍历的判断分支中，用return返回你构造的JSX元素，值为空的分支直接返回null即可，React会自动忽略null不做渲染。
• 增加空值兜底：在执行对象key读取逻辑前，先判断接口数据是否已经加载完成，避免首屏渲染报错。
• 补充列表key：map返回的JSX根节点增加唯一key属性（这里用size字段名做key即可），消除React渲染警告。

const dataMetricas = () => {
  // 接口数据未返回时直接返回null，避免访问data[0]报错
  if (!data?.length) return null;
  const keys = Object.keys(data[0]).filter(value => value.includes('size'));

  return keys.map(function (value) {
    if (data[0][value] != null) {
      const metricasCM = data[0][value] / 10;
      const textHead = value.replace('size', '').replace('e', '/');
      // 显式返回JSX，绑定唯一key
      return (
        <div key={value} className={styles.box}>
          <div className={styles.tamanho}>
            <span>{textHead}</span>
          </div>
          <div className={styles.tamcm}>
            <span>{metricasCM} cm</span>
          </div>
        </div>
      );
    }
    // 空值项不渲染
    return null;
  });
};

注意：你原先写在JSX外层的多余花括号要直接删除，在函数返回位置直接写JSX即可，不需要额外用花括号包裹。

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