我如何在 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

您的數據是鍵 -> 值的 map 以便遍歷所有國家/地區（鍵）。

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

Answer 2

您可以將對象的 Object 轉換為對象數組。

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;