如何调试 API 调用（获取请求）？答案

【问题标题】：How do I debug an API call (fetch request)?如何调试 API 调用（获取请求）？
【发布时间】：2021-09-02 13:52:40
【问题描述】：

我正在使用 react 并尝试从此 API 获取数据 https://6033c4d8843b15001793194e.mockapi.io/api/locations

我想获取名称，但它没有加载任何内容。我如何调试它并查看我的代码的哪些部分有效，哪些部分无效？

function Card() {
    const url = "https://6033c4d8843b15001793194e.mockapi.io/api/locations";
    const [locations, setLocations] = useState(null);

    useEffect(() => {
        axios.get(url)
        .then(response => {
            setLocations(response.data)
        })

    }, [url])

    if(locations) {
        return (
            <div>
                <h1>Acme HQ</h1>
                <p>{locations.id}</p>
            </div>
        )
    }

    return (
        <div>
            <h1>error</h1>
        </div>
    )

   
}

这是我的代码，它不会抛出任何错误，但也不会输出任何东西。

我想从该 API 中检索名称或用户数

【问题讨论】：

标签： reactjs api axios

【解决方案1】：

因为 api 返回一个对象数组。因此，您可以像这样在数组中获取项目的 id：

{locations?.[0].id}

从数组中渲染项目。你可以使用map:https://reactjs.org/docs/lists-and-keys.html

【讨论】：

天哪，成功了！我拥有所有这些数据，我想为与 id 一样多的元素以及每个元素的数据创建一个 HTML 卡（它们现在是 20 个）。你有什么建议？
您可以使用地图渲染所有元素
感谢您的意见@Viet 我对此不太熟悉，但我有点听从您的意思。有没有机会你可以告诉我用谷歌搜索什么，这样我才能做到这一点？我有这 20 个项目（每个项目 20 个 ID），我想为每个项目创建一张新卡，并让它们根据 API 数据进行更新，因此如果数据发生变化，它们也会发生变化。