我如何在 React 中迭代 JSON 数据答案

【问题标题】：How do i iterate over JSON data in React我如何在 React 中迭代 JSON 数据
【发布时间】：2021-04-24 13:49:37
【问题描述】：

我想要做什么： 在 react 中获取数据进行一些练习，我使用了 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数据的图片：

【问题讨论】：

使用setData(result.data); 而不是setData([result.data]);
@ShivamJha 这仍然不能解决问题
以上建议后console.log()的结果是什么？
@ShivamJha imgur.com/a/x558o6S
然后使用Object.keys(data).map()

标签： javascript json reactjs

【解决方案1】：

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

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

【讨论】：

【解决方案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;

【讨论】：