Question

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

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

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>;
}

Answer 1

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

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

Answer 2

缺少 export default

import "./styles.css";

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

export default 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 >
      <
      p > virka plíssss < /p>  {data.results.map((i) => (
      <li key={i.results}> {i.humanReadableLocation}</li>
    ))} <
      /div>
    );
  }
  return <div > Oops, náðist ekki að sækja gögn < /div>;
}

Updated code sanbox

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

2 个答案: