如何显示API中所有要在DOM中呈现的名称

Question

我正在使用React，并试图使用React的useState((和useEffect((钩子打印API中所有字符的名称，但只有最后一个字符名称打印到DOM，而不是整个列表(我在useEffect钩子内部使用for循环(。它只显示数组中的最后一个字符，这是我做错了什么吗？

T。I.

比较.js

import React from 'react';
import './Compare.css';
import axios from 'axios';
import "https://kit.fontawesome.com/3d7d8906d0.js";
import RadarChart from '../components/charts/RadarChart';
import Radar2 from '../components/charts/Radar2';
import {useEffect, useState, useRef} from 'react';
const Compare = () => {
const[allChampions, setAllChampions] = useState("");
useEffect(() => {
axios.get('https://api.sportsdata.io/v3/lol/stats/json/Champions?key=94c287b249d74701adf60e03aa398884')
.then((res) => {
let data = res.data;
for( let i = 0; i < data.length; i++) {
const championNames = data[i].Name;
setAllChampions(championNames);
}
})
}, [])
console.log(allChampions);
return(
<>
<div className='intro'>
<h2>Compare</h2>
<h3>Who is the strongest?<br/></h3>
<p>Compare champions on their <strong>HP</strong>, <strong>Mana</strong>, <strong>Armor</strong>, <strong>Attack</strong> & <strong>Defense</strong>. </p>
</div>

<div className='search-block'>
{/* Would use this for compare page! */}
<div>
<div className='search'>
<input type="search" id='champion-search' placeholder='e.g Annie'/>
</div>
<button className='btn-prim'>Search</button>
</div>
<div className='championNames'>
{allChampions}
</div>
</div>

<div className='search-block'>
{/* Would use this for compare page! */}
<div>
<div className='search'>
<input type="search" id='champion-search' placeholder='e.g Annie'/>
</div>
<button className='btn-prim'>Search</button>
</div>
</div>
<div className='result'>
<div className='graph-block'> 
<h3>ANNIE</h3>
<img src='https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Annie_0.jpg' width="50%"/>
<RadarChart/>
</div>

<div className='graph-block'>
<h3>AATROX</h3>
<img src='https://lolstatic-a.akamaihd.net/frontpage/apps/prod/rg-champion-aatrox/en_GB/5b922bef08881410f8fffa7273c30a75dfb1d11f/assets/downloads/wallpapers/aatrox-1920x1080.jpg' width="50%"/>
<Radar2/>
</div>
</div>
</>
)
}
export default Compare;

应用程序.js

import './index.css'
import {Routes, Route} from 'react-router-dom';
import Nav from "./components/Nav";
import Dashboard from "./components/Dashboard";
import Compare from './components/Compare';
import Timeline from './components/Timeline';
function App() {
return (
<div className="App">
<Nav />
<Routes>
<Route path='/' element = {<Dashboard/>}></Route>
<Route path='/Compare' element = {<Compare/>}></Route>
<Route path='/Timeline' element = {<Timeline/>}></Route>
</Routes>
</div>
);
}
export default App;

Answer 1

您必须使用map

{allChampions.map((item)=>
{ 
<div key={item.ChampionId} className='championNames'>
{item.Name}
</div>

})}

Answer 2

我建议你使用.map函数来代替这个。然后在获取之后，用u已经获取的数据设置状态为data。然后在jsx内部使用这个

axios.get('https://api.sportsdata.io/v3/lol/stats/json/Champions?key=94c287b249d74701adf60e03aa398884')
.then((res) => {
let data = res.data}
.then(setdata(data))

//那么你可以像我说的一样使用映射函数

{data && data.map(item=>(
<h1>{item}</h1>
))};

这意味着当数据在这里时，获取该列表中的每个对象，并将其传递到h1标签中

Answer 3

您需要对useEffect 进行细微更改

useEffect(() => {
axios.get('https://api.sportsdata.io/v3/lol/stats/json/Champions?key=94c287b249d74701adf60e03aa398884')
.then((res) => {
let data = res.data;
const championNames = []
for( let i = 0; i < data.length; i++) {
championNames.push(data[i].Name)
}
setAllChampions(championNames);
})
}, [])

或者你可以使用其他人建议的更好的方法。