React类组件中如何访问Promise返回的数据并循环展示？

开发者阿泽

2026-8-3

类组件中API数据获取后无法访问的解决方法

问题根源

你直接将fetchDataFromAPI()返回的Promise对象存入了state，导致this.state.countries是Promise而非实际的数组数据。即使Promise已完成，初始渲染时countries可能为undefined，或因对象类型不匹配，直接调用map或then都会报错。

修正步骤

正确处理API调用与state更新
不要把Promise直接存进state，需等待Promise resolve后，将实际数据存入state，两种实现方式如下：

写法一：使用`.then()`链式调用

componentDidMount() {
  this.fetchDataFromAPI()
    .then(data => {
      this.setState({ countries: data });
    })
    .catch(err => {
      console.error('加载国家列表失败:', err);
    });
}

写法二：将`componentDidMount`改为async函数

async componentDidMount() {
  try {
    const countryData = await this.fetchDataFromAPI();
    this.setState({ countries: countryData });
  } catch (err) {
    console.error('加载国家列表失败:', err);
  }
}

初始化state并处理加载状态
先在constructor中初始化countries的默认值，避免render时出现undefined：

constructor(props) {
  super(props);
  this.state = {
    countries: undefined
  };
}

在render中先判断数据是否存在，再渲染列表：

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

  // 数据未加载完成时显示加载提示
  if (!countries) {
    return <div>加载中...</div>;
  }

  return (
    <div>
      <h3>国家列表</h3>
      <ul>
        {countries.map(country => (
          <li key={country.id}>{country.name}</li>
          // 注意：根据你的API返回数据结构调整key和显示字段
        ))}
      </ul>
    </div>
  );
}