React循环渲染时<br>标签无效且报对象不能作为React子元素错误

问题根源 #

1. 你原代码中循环内的JSX片段（<>{text +=a}<br/></>）仅被创建但未保存，最终只返回了拼接后的数字字符串，导致<br>完全无法生效。
2. 报错Objects are not valid as a React child是因为错误的内容处理方式，React无法识别字符串拼接后的非法渲染内容，正确的做法是生成React元素数组来渲染列表。

修正代码 #

方式一：for循环收集元素 #

import React from 'react';

const UseReducers = () => {
  const looper = () => {
    const elements = [];
    // 改用let避免变量提升导致的逻辑问题
    for (let a = 1; a <= 100; a++) {
      elements.push(
        <React.Fragment key={a}>
          {a} <br />
        </React.Fragment>
      );
    }
    return elements;
  };

  return <>{looper()}</>;
};

export default UseReducers;

方式二：Array.from简化写法 #

import React from 'react';

const UseReducers = () => {
  const looper = () => {
    return Array.from({ length: 100 }, (_, index) => (
      <React.Fragment key={index + 1}>
        {index + 1} <br />
      </React.Fragment>
    ));
  };

  return <>{looper()}</>;
};

export default UseReducers;

关键改进点 #

• 用数组存储每个循环生成的React元素，而非字符串拼接，确保<br>作为React标签被正确渲染。
• 给每个列表元素添加唯一key属性，符合React列表渲染的要求，避免性能警告。
• 直接返回元素数组，React可正确解析并渲染所有内容，实现数字换行的效果。

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