我很抱歉我的無知，但是自從我編碼以來已經有一段時間了，我需要一些幫助來處理這個基本的事情，我試圖找到名字，并在我單擊按鈕時將其顯示在螢屏上，但我只是想不通，你能幫我解釋一下你做了什么，以便我下次知道嗎？看了手冊和關于如何做的文章，但你們只是更好。我的代碼：
功能（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
));
})
}
應用程式.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;
uj5u.com熱心網友回復：
干得好！由于您使用的是打字稿，因此我也創建了一個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編輯：如果您的專案版本不支持可選鏈接，則該陳述句的另一個版本
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>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/489778.html