开发者问题收集

在 React 上显示来自 api 的数据

2020-07-26
194
javascript reactjs

我尝试使用以下 API 显示每个团队的名称： https://www.balldontlie.io/api/v1/teams 。我的主要 app.js 文件中有以下代码： 

const result = await Axios('https://www.balldontlie.io/api/v1/teams')
console.log(result.data)
console.log(result.data.data[0])

这能够成功获取数据，并且第一行控制台能够在控制台中显示所有数据，而第二行显示数据中有关第一支球队的所有信息。在每个球队数据信息中，他们有一个名为“name”的属性，表示球队名称。我想知道我将如何调用它。当我在另一个文件中有以下代码时，它不会在屏幕上显示任何内容： 

{Object.keys(items).map(item => (
            <h1 key={item}>{item.data}</h1>
        ))}

我应该如何更改 item.data 才能正确显示所有球队的名称？如果需要的话我可以提供更多代码，但我认为这个代码可能就够了。

3个回答

不要使用 axios，现在 JS 有一个更好的替代方案，称为 fetch。在异步函数上包装调用。最后析构数据对象。并在 node_modules 上安装更多东西。

这里是什么？

  1. 使用 callApi 函数请求端点

  2. 完成承诺时仅从所有 json 范围收集数据。

  3. 循环遍历每个名​​称 

const myComponent = () => {
    const names = [];
    const callApi = async () => {
        await fetch('https://www.balldontlie.io/api/v1/teams')
        .then(r => r.json())
        .then(resp => { const { data } = resp; return data; })
        .catch(e => { console.log(e.message); });
    };
    callApi();

    return <>
        {names && names.length > 0
        ? <span>{names.map(({ id, name }) => <h1 key={id}>{name}</h1>)}</span>
        : <span>No rows </span>}
    </>;
Eddwin Paz
2020-07-26

根据第二段代码，您正在尝试访问字符串的“数据”属性，因为您正在映射项目的键数组。

有效地： 

const item_keys = Object.keys(items);
//if the items is an array, item_keys = ["0","1",...]
//if items is an object, item_keys = ["id","name",...]
const result = item_keys.map(item => (
    <h1 key={item}>{item.data}</h1>
));
//either way, result is an array of <h1>undefined</h1>
//because item is a string

假设您将项目定义为 const items = result.data.data （已编辑），您应该能够显示如下名称： 

{items.map((item, index) => (
    <h1 key={index}>{item.name}</h1>
))}
yrden
2020-07-26
const result = await Axios('https://www.balldontlie.io/api/v1/teams')
const data = result.data;

//if you want to display all names
{
    data.map(team => (
        <div>
            <h1 key={`${team.id}`}>{team.name}</h1>
        </div>
    )
}

//if you want to display all fields in each team
{
    data.map(team => (
        <div key={`${team.id}`}>
            {
                Object.keys(team).map((key, keyIndex) => (
                    <h1 key={`k-${team.id}-${keyIndex}`}>{team[`${key}`]}</h1>
                ))
            }
        </div>
    )
}
AFLAH ALI
2020-07-26