无法进入 json 导致打字稿反应

Question

我是第一次使用打字稿。我做了两个页面，详细页面正在获取口袋妖怪的所有详细信息。但是当我想进去的时候，我不能进去。以下是我设置状态口袋妖怪的方法。接口

export interface IState {
  id: string;
  url: string;
  pokemon: [];
}

我正在获取数据并通过以下代码将其添加到状态

  public componentDidMount(): void {
    axios
      .get(`https://pokeapi.co/api/v2/pokemon/${this.state.id}`)
      .then((data) => {
        this.setState({ pokemon: data.data });
      });
  }

下面是我的 json 回来了

{
    "abilities": [
        {
            "ability": {
                "name": "static",
                "url": "https://pokeapi.co/api/v2/ability/9/"
            },
            "is_hidden": false,
            "slot": 1
        },
        {
            "ability": {
                "name": "lightning-rod",
                "url": "https://pokeapi.co/api/v2/ability/31/"
            },
            "is_hidden": true,
            "slot": 3
        }
    ],
    "base_experience": 112
}

我可以通过在组件中使用以下代码轻松访问 base_experience

Experience Index: {this.state.pokemon.base_experience}

但我想访问能力并使用以下代码但出现错误

{this.state.pokemon['abilities'].map((ability)=>(
 <p>{ability['ability']['name']}</p>
))}

我也使用了以下，但它也给出了同样的错误

{this.state.pokemon.abilities.map((ability)=>(
  <p>{ability['ability']['name']}</p>
))}

还尝试通过添加类型 ability: any 但仍然无法正常工作，并且还在 tsconfig.json 中更改为 "noImplicitAny": false 但仍然没有运气。我收到以下错误

TypeError: Cannot read property 'map' of undefined

但是当我做控制台它显示列表时它是列表。

我知道这是重复的问题，我已经看到了近 10 个答案，但无法解决。如果我这样做 console.log(this.state.pokemon['abilities'] 它会打印带有名称和 url 的整个数组。但是当我尝试映射时，它并没有这样做。

Answer 1

问题是您已将pokemon 声明为[]。它应该具有any 类型（或者最好定义一个描述数据格式的类型）。

以下程序按预期编译并记录“static”和“lightning-rod”：

interface IState {
  id: string;
  url: string;
  pokemon: any;
}

let data = {
    "abilities": [
        {
            "ability": {
                "name": "static",
                "url": "https://pokeapi.co/api/v2/ability/9/"
            },
            "is_hidden": false,
            "slot": 1
        },
        {
            "ability": {
                "name": "lightning-rod",
                "url": "https://pokeapi.co/api/v2/ability/31/"
            },
            "is_hidden": true,
            "slot": 3
        }
    ],
    "base_experience": 112
};

function foo(state: IState) {
    return state.pokemon.abilities.map((ability: any) => ability.ability.name);
}

console.log(foo({id : "x", url: "blah", pokemon: data}));

Answer 2

我想是因为你试图访问一个未定义的属性，而你的 pokemon 的初始状态当前是空白的，所以试试这个方法

{this.state.pokemon.abilities && this.state.pokemon.abilities.map((ability)=>(
  <p>{ability['ability']['name']}</p>
))}