javascript - 我如何在 React 中迭代 JSON 数据

Question

我正在尝试做的事情： 在反应中获取数据进行一些练习，并且我使用了带有案例数量的covid19 api等...

这是代码：

import { useState, useEffect } from "react";
import axios from "axios";
const Home = () => {
const [data, setData] = useState([]);
useEffect(() => {
    const fetchData = async () => {
        const result = await axios("api_here",);
        setData([result.data]);
    };
    fetchData();
}, [])
console.log(data);//i have a screen-shot below for the output
return (
    <ul>
        {data.map((items, index) => (
            <li key={index}>{JSON.stringify(items)}</li>
            //<li key={index}>{items}</li> This doesn't work
        ))}
    </ul>
 )} export default Home;

问题是数据是1个元素的数组，图像在这里：

data.map 仅在 json[0] 上进行迭代，但我需要从 json 遍历每个国家/地区。

我尝试做类似的事情：

setData([result.data][0])
//or
data[0].map...... 

但不起作用

带有 json 数据的图片：

Answer 1

您的数据是键 -> 值的映射，因此可以遍历所有国家/地区（键）。

<ul>
    {Object.keys(data).map((key, index) => (
        <li key={index}>{JSON.stringify(data[key])}</li>
    ))}
</ul>

Answer 2

您可以将对象对象转换为对象数组。

import { useState, useEffect } from "react";
import axios from "axios";
const Home = () => {
const [data, setData] = useState([]);
useEffect(() => {
    const fetchData = async () => {
        const result = await axios("api_here",);
        let res = [result.data];
        res = Object.entries(res[0]).map((e) => ( { [e[0]]: e[1] } ));
        setData(res);
    };
    fetchData();
}, [])
console.log(data);
return (
    <ul>
        {data.map((items, index) => (
            <li key={index}>{JSON.stringify(items)}</li>
            //<li key={index}>{items}</li> This doesn't work
        ))}
    </ul>
 )} export default Home;