时间戳

首页 > 解决方案 > 如何显示来自返回对象而不是数组的 api 调用的数据

javascript - 如何显示来自返回对象而不是数组的 api 调用的数据

问题描述

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;

在此先感谢您的帮助。

标签： javascriptreactjsaxios

解决方案

你是对的，你第一次尝试做.map()on championswon't work 因为它不是一个数组，它是一个对象。

你的第二次尝试更接近，但当你这样做时 -

champions[key]

这将返回您的一个champion对象。您只需要从该对象访问所需的属性，例如

champions[key].name- 获取champion例如的名称Aatrox

推荐阅读