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

Posted 2023-02-22

【中文标题】无法进入 json 导致打字稿反应

【英文标题】：Can't go inside of json results in typescript react

【发布时间】：2021-06-11 03:38:16

【问题描述】：

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

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 的整个数组。但是当我尝试映射时，它并没有这样做。

【问题讨论】：

你得到哪个错误？

TypeError: 无法读取 this.state.pokemon['abilities'].map 和 this.state.pokemon.abilities.map 的未定义属性“映射”

您现在已将“pokemon”的类型更改为数组。它不是一个数组，而是一个对象

【参考方案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));

【讨论】：

它也是！但即使我使用了你的代码，同样的问题，但仍然不正确。但 jersrej 解决了它。谢谢

【参考方案2】：

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

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

【讨论】：

感谢它的工作！很棒，虽然我也这样做了，但有些我可能在理解上有问题，而且我的情况也不正确。谢谢。