使用地图时在对象内获取数据

Question

我对自己的无知事先提前很抱歉，但是自编码以来已经有一段时间了，我需要对这个基本的东西进行一些帮助，我试图访问名称，并在我单击按钮时在屏幕上显示它，但是我只是无法弄清楚，您能帮我并解释您所做的事情，以便我下次知道吗？看着有关如何做的手册和文章，但你们只是更好。 我的代码：

功能（pokeapi.ts）：

import React from "react";
import axios from 'axios'


export const getPokemon=()=>{
    axios.get("https://pokeapi.co/api/v2/pokemon?limit=151").then((response)=>{
response.data.results.map((cont : string,index : number) => console.log(
        cont
      ));
    })

  }

app.tsx：

   import './App.css';
    import React from 'react';
    import {getPokemon} from './func/pokeAPI';
    
    function App() {
    
      return (
    <div>
    <button onClick={getPokemon}>Cli</button>
    </div>
    
      );
    }
    
    export default App;

Answer 1

干得好！由于您正在使用TypeScript，因此我还创建了一个Pokemondata接口。

import React from 'react'
import axios from 'axios'
import "./styles.css";

interface PokemonData {
  name: string
  url: string
}


export default function App() {
  const [pokemons, setPokemons] = React.useState<null|PokemonData[]>(null)

  const onClick = async () => {
    axios.get("https://pokeapi.co/api/v2/pokemon?limit=151").then((response)=>{
      console.log(response.data.results)
      setPokemons(response.data.results)
     })
  }

  return (
    <div className="App">
      <button onClick={onClick}>Get pokemon</button>
     {pokemons?.map((pokemon) => (
       <div key={pokemon.name}>
         <p>{pokemon.name}</p>
         <p>{pokemon.url}</p>
       </div>
     ))}
    </div>
  );
}

我还写了 codesandbox 在这里，您可以查看它的

编辑：返回语句的另一个版本，如果您的项目版本不支持可选的链接

 return (
    <div className="App">
      <button onClick={onClick}>Get pokemon</button>
     {pokemons && pokemons.map((pokemon) => (
       <div key={pokemon.name}>
         <p>{pokemon.name}</p>
         <p>{pokemon.url}</p>
       </div>
     ))}
    </div>
  );
}