React中fetch返回Promise致map报错，如何正确遍历数据？

这个问题我之前也碰到过，核心出在对fetch API的异步处理逻辑上，咱们一步步来拆解解决：

错误原因分析 #

你遇到的this.state.items.map is not a function错误，本质是因为data.json()返回的是一个Promise对象，而非直接的数组数据。当你直接把这个Promise赋值给this.state.items时，render函数执行时items还是未解析的Promise，它自然没有数组的map方法。

修正后的代码实现 #

我们需要在fetch的链式调用中，先解析出真正的JSON数组数据，再更新组件状态：

import React from 'react';
import ReactDOM from 'react-dom';

class RestSample extends React.Component{
  constructor(props) {
    super(props);
    this.state = { items: [] };
  }

  fetchHotels(event){
    fetch('http://localhost:8000/ui/rest/hotel')
      // 第一步：将响应解析为JSON格式（这一步返回Promise）
      .then(response => response.json())
      // 第二步：拿到解析后的数组数据，更新state
      .then(data => {
        this.setState({ items: data });
      })
      // 别忘了添加错误处理，避免请求失败时无提示
      .catch(error => {
        console.error('获取酒店列表失败:', error);
        this.setState({ items: [] }); // 失败时重置状态，避免后续渲染出错
      });
  }

  render(){
    const { items } = this.state;
    return(
      <div>
        <button onClick={(event)=>this.fetchHotels(event)}>Hotel list</button>
        <ul>
          {/* 渲染前判断数组长度，给用户友好提示 */}
          {items.length === 0 ? (
            <li>点击按钮获取酒店列表</li>
          ) : (
            items.map(item => (
              {/* 必须给列表项添加唯一key属性，React要求 */}
              <li key={item.id}>{item.name}</li>
            ))
          )}
        </ul>
      </div>
    )
  }
}

ReactDOM.render(
  <RestSample />,
  document.getElementById('root')
);

关键优化点说明 #

• 正确处理异步流程：response.json()是异步操作，必须通过第二个then来获取解析后的数组数据，再用setState更新状态，这样render函数才能拿到真正的数组进行遍历。
• 添加列表项key：React要求列表渲染时每个项都要有唯一的key属性，这能提升渲染性能，避免控制台警告。
• 错误处理：添加catch方法处理网络请求失败、API返回错误等情况，同时重置状态保证组件后续正常渲染。
• 用户友好提示：当items为空数组时，显示提示文本，而不是空列表，提升用户体验。

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