在React中迭代JSON对象

Question

我目前正在努力迭代从第三方API获取的JSON对象。您可能会看到，以前没有真正处理过获取API。

这是我正在获取的JSON文件：
链接到JSON文件

为了获取数据，我使用一个useFetch脚本，它看起来像这样：

// useFetch.js

import { useState, useEffect } from "react";
import fetch from 'isomorphic-unfetch';

function useFetch(url) {

    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(true);

    async function fetchUrl() {
        const res = await fetch(url);
        const json = await res.json();
        setData(json);
        setLoading(false);
    }

    useEffect(() => {
        fetchUrl();
    }, []);

    return [data, loading];
}

export { useFetch };

我稍后尝试导出的只是每个角色/冠军的名称（他本身就是一个对象，包括名称、描述等）

// App.js

import { useState, useEffect } from 'react';
import { useFetch } from "../components/useFetch";

const App = () => {
    const [data, loading] = useFetch(
        "https://ddragon.leagueoflegends.com/cdn/9.3.1/data/en_US/champion.json"
    );

    useEffect(() => {
        console.log(data)
    })

    return (
        <div>
           <ul>
              {Object.keys(data.data).map((item, i) => (
                  <li key={i}> // every character has got an ID as well I'd like to pass here later. The output is just a dummy rn.
                      <p>{data.data}</p>
                  </li>
              ))}
           </ul>
        </div>
    )
}

export default App;

不幸的是，我在尝试转换JSON对象数据时遇到了一个错误。data表示：

类型错误：无法将未定义或null转换为指向我在JSX中的迭代的对象。

我尝试的是针对那些空洞的规则，给它们一个字符串，结果是这样的

if ((typeof Object === null) || (typeof Object === undefined)) { 
  return '-' 
}

或

if ((item === null) || (item === undefined)) { 
  return '-' 
}

如前所述

但这显然没有帮助。

我将感谢任何提示/优化与此。




Answer 1

我不太想对钩子做出反应，但您将数据设置为[]，因此数据。在实际获取数据之前，数据将是未定义的。

如果在useFetch中设置const[data， setData]=useState（{data: [] });，它会工作吗？