https://i.stack.imgur.com/RaoRC.jpg https://i.stack.imgur.com/fPge5.jpg
我有這個來獲取兩個不同的 API。
API #1獲取未按排名組織的名稱 API #2獲取按排名組織的名稱的 ID，因此如果 ID 和名稱匹配，我需要進行內部回圈以獲取玩家的名稱。
我在異步功能上做過這樣的事情
<script>
getData();
async function getData() {
const response = await fetch('http://localhost:3008/api/highscore/players')
console.log(response);
const data = await response.json();
const req = await fetch('http://localhost:3008/api/players')
console.log(req);
const info = await req.json();
length = data.players.length;
console.log(data);
var temp = "";
for (i = 0; i < length; i )
for (j = 0; j < length; j ) {
{
if (info.players[i].id == data.players[j].id) {
temp = "<tr>";
temp = "<td>" data.players[j].position "</td>";
temp = "<td>" info.players[i].name "</td>";
temp = "<td>" data.players[j].score "</td>";
temp = "</tr>";
}
}
}
document.getElementById("data").innerHTML = temp;
}
這是我需要完成的 React APP 代碼：我該怎么做？任何想法？任何幫助將不勝感激！
import axios from "axios";
import React, { useState, useEffect } from "react";
const Ranking = () => {
const [playerName, setPlayerName] = useState([]);
const [playerRank, setPlayerRank] = useState([]);
const fetchData = () => {
const playerAPI = 'http://localhost:3008/api/players';
const playerRank = 'http://localhost:3008/api/highscore/players';
const getINFOPlayer = axios.get(playerAPI)
const getPlayerRank = axios.get(playerRank)
axios.all([getINFOPlayer, getPlayerRank]).then(
axios.spread((...allData) => {
const allDataPlayer = allData[0].data.players
const getINFOPlayerRank = allData[1].data.players
setPlayerName(allDataPlayer)
setPlayerRank(getINFOPlayerRank)
})
)
}
useEffect(() => {
fetchData()
}, [])
return (
<table class="table table-bordered">
<tr>
<th>Rank</th>
<th>Name</th>
<th>Points</th>
</tr>
<tbody>
{playerName?.map((name) => {
return (
<tr key={name.name}>
<td>{name.name}</td>
</tr>
)
})}
</tbody>
</table>
)
}
export default Ranking
uj5u.com熱心網友回復：
這是渲染的內容輸出
您使用什么型別的后端語言？或者你正在使用遠程服務器？這可以在后端完成，但前提是您可以訪問它。Spring boot 在這方面非常棒，使用 ORM，您可以使用 @ManyToOne 或 @OneToMany 關系輕松映射表。如果你愿意，我可以為你做這件事，請聯系我。
如果您只想使用您的代碼，或者您正在從遠程服務器獲取回應，則獲取回應，將資料分別放入 playerInf 和 rankInfo 狀態。在回傳方法中直接使用此代碼后：
// 在您的應用程式中添加以下函式，替換 url 并在 useEffect 掛鉤或您選擇的函式中呼叫它們。
import React, {useState, useEffect} from 'react';
function App(props) {
useEffect(()=> {
// get the data from the website every 24 hours
const intervalId = setInterval(() => {
playerInfoData();
playerRankData();
}, 86400000);
return ()=> {
clearInterval(intervalId);
};
},[]);
const playerInfoData = () => {
fetch(`resources/jsons/player.json`,//replace your url here
{
headers : {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
}).then(res => res.json()).then(
data => {
setPlayerInfo(data);
setReady(true);
}).catch(error => {
console.log(error);
});
}
const playerRankData = () => {
fetch(`resources/jsons/rank.json`,
{
headers : {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
}).then(res => res.json()).then(
data => {
setRankInfo(data);
setReady(true);
}).catch(error => {
console.log(error);
});
}
// ready is used to tell react to not render unless data is ready
return (
{ready && playerInfo.map(player => {
return (
<tr key={player.name}>
<td>{ready && rankInfo.map(rank => {
if(player.id === rank.id){
return rank.value;
}
})
}</td>
<td>{player.name}</td>
<td>{player.points}</td>
</tr>
)
})
}
)
}
同樣，這不是一個好習慣，請始終在后端執行您的邏輯并自定義回應。我可以幫助您，如果您想了解更多資訊，請與我聯系。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/524261.html