ReactJS如何访问数组及嵌套对象属性？以PokemonInfo组件为例

我明白你想从Pokemon API返回的数组里拿到每个stat的base_stat字段，遍历没成功大概率是因为数据还没加载完成就尝试访问，或者遍历的方式有问题。咱们一步步来解决：

首先，先补全你的PokemonInfo组件逻辑，先确保你正确获取到了API数据，再处理stats数组：

完整示例代码 #

PokemonInfo.js #

import React, { Component } from "react";

class PokemonInfo extends Component {
  state = {
    pokemon: null,
    loading: true,
    error: null
  };

  componentDidMount() {
    // 也可以根据props传递的pokemon ID动态请求，比如props.pokemonId
    fetch("https://pokeapi.co/api/v2/pokemon/1/")
      .then(response => {
        if (!response.ok) {
          throw new Error("Failed to fetch pokemon data");
        }
        return response.json();
      })
      .then(data => {
        this.setState({
          pokemon: data,
          loading: false
        });
      })
      .catch(error => {
        this.setState({
          error: error.message,
          loading: false
        });
      });
  }

  render() {
    const { loading, error, pokemon } = this.state;

    if (loading) return <div>Loading pokemon info...</div>;
    if (error) return <div>Error: {error}</div>;

    return (
      <div className="pokemon-info">
        <h2>{pokemon.name}</h2>
        <h3>Base Stats:</h3>
        <ul>
          {/* 遍历stats数组，提取每个stat的名称和base_stat */}
          {pokemon.stats.map((statItem, index) => (
            <li key={index}>
              {statItem.stat.name}: <strong>{statItem.base_stat}</strong>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default PokemonInfo;

关键要点说明： #

• 数据加载状态处理：一定要先判断loading状态，确保数据返回后再去访问pokemon.stats，不然初始状态下pokemon是null，直接访问会触发报错。
• 正确遍历stats数组：pokemon.stats是一个数组，每个元素包含stat对象（里面有属性名称）和base_stat字段，用map遍历就能逐个取出对应值。记得给每个列表项加唯一的key（这里用index临时替代，实际项目里如果有唯一标识会更规范）。
• 错误处理：API请求可能因网络或接口问题失败，加上catch逻辑能避免页面崩溃，还能给用户清晰的错误提示。

如果你不需要遍历所有stats，只想获取某个特定的stat（比如攻击attack），可以用find方法精准定位：

const attackStat = pokemon.stats.find(item => item.stat.name === "attack");
// 之后直接使用attackStat.base_stat即可

这样应该就能顺利拿到你需要的base_stat字段了，试试这个方案吧！

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