reactjs - React.js 无法使用 useEffect & fetch 在 UI 中显示 API 数据

问题描述

我正在尝试在 UI 中显示来自 API 的数据。我可以在控制台中看到数据，但是当我尝试映射返回中的数据时总是会出错。理想情况下，我想访问结果数组中的所有对象。

如果你想测试它，这里是App.js和一个代码框的代码。

import React, { useState, useEffect } from "react";

export function App() {
  const [data, setData] = useState({
    results: []
  });
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const api = "https://apis.is/earthquake/is";
  useEffect(() => {
    //if (!api) return;
    setLoading(true);
    fetch(api)
      .then((response) => response.json())
      .then(setData)
      .then(() => setLoading(false))
      .catch(setError);
  }, []);

  if (loading) return <h1>Loading...</h1>;
  if (error) return <pre>{JSON.stringify(error, null, 2)}</pre>;
  if (!data) return null;
  //{JSON.stringify(data)}
  console.log(data);
  console.log(data.results[1]);
  if (data.results) {
    return (
      <div>
        {data.results.map((i) => (
          <li key={i.results}> {i.humanReadableLocation}</li>
        ))}{" "}
      </div>
    );
  }
  return <div> Failed to get data </div>;
}

标签： reactjsapireact-hooksfetchuse-effect

你甚至想输出什么？结果是一个对象。这是一个示例，但您需要决定在 LI 中需要什么属性，键可能不应该是 Object，选择一个属性。

{data.results.map((i) => (
      <li key={i.results}> {i.timestamp}</li>
    ))}

reactjs - React.js 无法使用 useEffect & fetch 在 UI 中显示 API 数据

问题描述

解决方案

推荐阅读