ReactJS 错误：对象作为 React 子对象无效（发现：[object Promise]）

Question

试图从天气 API 中提取数据并将其显示在 React 中是一场噩梦，但是当我运行代码时出现错误：

“对象作为 React 子对象无效（已找到：[object Promise]）。如果您打算渲染子对象的集合，请改用数组。”

我的代码如下：

export default function getWeatherFromApiAsync() {
  return fetch(
    "https://api.openweathermap.org/data/2.5/weather?q=brighton,uk&appid=8b609354454cdb6c5a7092a939861ace&units=metric"
  )
    .then((response) => response.json())
    .then((responseJson) => {
      return (
        <div className="App">
          {responseJson.map((weather) => (
            <div>
              <h6> {weather.coord.lon}</h6>
            </div>
          ))}
        </div>
      );
    })
    .catch((error) => {
      console.error(error);
    });
}

任何帮助表示赞赏！

Answer 1

您无法像这样从 Promise 渲染默认组件。

您可以利用useState,useEffect挂钩来获取数据并将其呈现到组件中。

您可以从此链接了解有关 React Hooks 的更多信息。

而且你的 api 响应是一个json对象，你试图map覆盖它。

注意：您只能映射数组类型的数据。

这是你的工作代码，

import { useEffect, useState } from "react";

const App = () => {
  const [data, setData] = useState({});
  useEffect(() => {
    const getWeatherFromApiAsync = async () => {
      const resopnse = await fetch(
        "https://api.openweathermap.org/data/2.5/weather?q=brighton,uk&appid=8b609354454cdb6c5a7092a939861ace&units=metric"
      );
      const resopnseJson = await resopnse.json();
      console.log("json", resopnseJson);
      setData(resopnseJson);
    };
    getWeatherFromApiAsync();
  }, []);

  return (
    <div className="App">
      <h6>{data?.coord?.lon}</h6>
    </div>
  );
};

export default App;