自学React实现API数据循环渲染，如何为每个展示的数组元素添加换行

AI 小北

2026-10-23

React循环渲染列表无换行的解决方法

你现在遇到的无换行问题，本质是代码里向items数组推入的是纯字符串，React渲染纯字符串数组时会把所有内容拼接成连续文本输出，没有独立块级元素做分隔，自然不会自动换行。适配你现有代码的简单解决方法有3种：

方法1：给每个渲染项套独立块级元素（最推荐）
循环构建items数组时，给每条文本套上<div>/<p>这类默认独占一行的块级标签，天然实现换行效果。注意需要给每个元素加唯一key属性，避免React抛出列表渲染的警告。
修改后的循环逻辑：
```
let items = [];
for (let i = 0; i < this.state.len; i++) {
  const item = this.state.person.results[i].name.title;
  items.push(<div key={i}>{item}</div>);
}
```

方法2：给每条内容追加换行标签
如果不想给文本额外套块级结构，直接在每条渲染内容后面加<br />换行标签即可：

let items = [];
for (let i = 0; i < this.state.len; i++) {
  const item = this.state.person.results[i].name.title;
  items.push(<span key={i}>{item}<br /></span>);
}

方法3：使用语义化列表结构渲染
你渲染的是接口返回的多条用户记录，本身就是列表场景，用<ul>+<li>的结构更符合前端语义规范，每个<li>默认独占一行，自然实现换行，还能省掉手动循环构建数组的步骤：

// 对应渲染逻辑可以简化为
return (
  <div>
    {this.state.loading || !this.state.person ? (
      <div>loading...</div>
    ) : (
      <ul>
        {this.state.person.results.map((user, idx) => (
          <li key={idx}>{user.name.title}</li>
        ))}
      </ul>
    )}
  </div>
);