如何顯示來自返回對象而不是數組的 api 調用的數據

Question

http://ddragon.leagueoflegends.com/cdn/10.16.1/data/en_US/champion.json

這是我試圖使用的 api。 出於某種原因，當我去映射它以從中提取數據並顯示數據時，它說 Champions.map 不是一個函數。 （我猜它這么說是因為我無法使用 .map 迭代對象。所以我嘗試使用 Object.keys(champions) 但我仍然無法真正讓它做我想要它做的事情。

我覺得我錯過了一些非常簡單的東西，因為我已經有一段時間沒有進行任何 api 調用了。

這是我的代碼。

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import ChampionContainer from "./ChampionContainer";
// import { Link } from 'react-router-dom';


const ChampionList = () => {
    const [ champions, setChampions ] = useState([])
    console.log("This is our state",champions)

    useEffect(() => {
            const url = "http://ddragon.leagueoflegends.com/cdn/10.16.1/data/en_US/champion.json";
            axios.get(url)
            .then(response => {
                setChampions(response.data.data);
            })
            .catch(error => {
                console.log("server Error", error)
            })
    }, [champions]);




    return (
        // Object.keys(a).map(function(keyName, keyIndex) {
        //     // use keyName to get current key's name
        //     // and a[keyName] to get its value
        //   })
        <div>
            {Object.keys(champions).map((key) => {
                return (<div key={key}>{champions[key]}</div>)
            })}
            {/* {champions.map((champion) => (
                <ChampionContainer key={champion.id} champion={champion}/>
            ))} */}
        </div>

    );
}


export default ChampionList;

在此先感謝您的幫助。

Answer 1

你是對的，你第一次嘗試在champions上做.map()是行不通的，因為它不是一個數組，它是一個對象。

你的第二次嘗試更接近，但當你這樣做時 -

champions[key]

這將返回您的champion對象之一。 您只需要從該對象訪問您想要的屬性，例如

Aatrox champions[key].name - 獲得champion的名字，例如Aatrox

Answer 2

你有一個無限循環。 在 useEffect 中將 Champions 作為參數傳遞，當它改變時你執行 useEffect，但在那里你 setChampions，然后 Champions 改變了 useEffect 再次運行。 結果無限循環。

您調試程序以確保 respomse.data.data 包含您需要的信息？

在 setChampions 函數中最好使用 setChampions(current => current + newData); 這是一個對象，因此您應該使用擴展運算符來映射到一個新對象。