代码之家 › 专栏 › 技术社区 › Kamal Panhwar

在typescript-react中无法进入json结果内部

state typescript reactjs

0

Kamal Panhwar · 技术社区 · 4 年前

我第一次用打字机。我已经制作了两页,详细页面包含了口袋妖怪的所有细节。但当我想进去的时候,我不能去。以下是我设置状态口袋妖怪的方法。接口

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>
))}

我也使用了follow,但它也给出了同样的错误

{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的整个数组。但当我试图绘制地图时,它并没有做到。

0 回复 | 直到 4 年前

1

jersrej 4 年前

我认为,因为你试图访问一个未定义的属性,而你的口袋妖怪的初始状态当前为空,所以请尝试这种方式

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

2

0

Jonas Høgh 4 年前

问题是你已经宣布 pokemon 作为 [] 。它应该有类型 any (或者最好定义一个描述数据格式的类型)。

以下程序按预期编译和记录“静态”和“避雷针”:

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}));