需要帮助来显示来自外部 API 的数据

Question

我从 API 获取了一些数据，我试图显示这些数据，但我做错了什么。有人可以帮忙吗？我在控制台和我的代码上附上了一张获取数据的照片[![data api

import React, {useState, useEffect} from 'react'


import './Track.css';

export default function Track() {

   const [carbon] =  useState([])

   useEffect( () => {

    const headers = {
        'Accept':'application/json'
       
      };
       
      fetch('https://api.carbonintensity.org.uk/intensity',
      {
        method: 'GET',
       
        headers: headers
      })
      .then(function(res) {
          return res.json();
      }).then(function(body) {
          console.log(body);
      });
    })

    return (
        <div>
           
             <p>Track</p>
             <div>
              <p>{carbon.forecast}</p>
             
             </div>

        </div>
    )
}

]1]1

Answer 1

改成

import React, { useState, useEffect } from 'react'


import './Track.css';

export default function Track() {

    const [carbon, setCarbon] = useState([])

    useEffect(() => {

        const headers = {
            'Accept': 'application/json'

        };

        fetch('https://api.carbonintensity.org.uk/intensity',
            {
                method: 'GET',

                headers: headers
            })
            .then(function (res) {
                setCarbon(res.data)
            }).then(function (body) {
                console.log(body);
            });
    })

    return (
        <div>

            <div>
                {carbon.map((obj, i) => (
                    <li key={i}>
                        <ul>{obj.from}</ul>
                    </li>
                ))}
            </div>
        </div>
    )
}

我建议你学习https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Answer 2

你忘记了一些小事：
首先，您忘记了 useStae 挂钩中的 setCarbon，您将需要它来传递来自 fetch 的响应。
您忘记在 fecth 中设置状态。 您将需要添加一个条件以仅在设置状态（碳）时呈现。 你需要添加一个空依赖到 useEffect

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

export default function Track() {
  const [carbon, setCarbon] = useState([]);

  useEffect(() => {
    const headers = {
      Accept: "application/json"
    };

    fetch("https://api.carbonintensity.org.uk/intensity", {
      method: "GET",

      headers: headers
    })
      .then((res) => {
        return res.json();
      })
      .then((body) => {
        console.log(body.data);
        setCarbon(body.data);
      });
  }, []);

  return (
    <div>
      <p>Track</p>
      {carbon.length > 0 && (
        <div>
          {carbon.map((c, i) => (
            <p key={i}>
              <div>from: {c.from} </div>
              <div>to: {c.to}</div>
              <div>forecast: {c.intensity.forecast}</div>
              <div>actual: {c.intensity.actual}</div>
              <div>index: {c.intensity.index}</div>
            </p>
          ))}
        </div>
      )}
    </div>
  );
}

Answer 3

给你， 请记住，状态就像为组件存储数据的地方。 当您使用 fetch 时，您正在获取数据，现在您需要将其保存到您的状态。 如果您在 JSX 中使用状态，您可以获得要显示的信息。 查看控制台日志，查看从 fetch 返回的数据结构。这就是设置为状态“数据”的内容。它可以被称为任何你想要的。您可以遍历它，并根据需要在 JSX 中动态显示数据，但我只是为您硬编码了它，这样更容易理解。

  const [data, setData] = useState([]);

  useEffect(() => {
    fetch("https://api.carbonintensity.org.uk/intensity", {
      method: "GET",
      headers: {
        "Content-Type": "application/json"
      }
    })
      .then((res) => res.json())
      .then((data) => setData(data))
      .catch((e) => console.error(e));
  }, []);

  console.log("data:", data);

  return (
    <div>
      <p>Track</p>
      <div>
        <p>From: {data.data["0"].from}</p>
        <p>To: {data.data["0"].to}</p>
        <div>Intensity:</div>
        <p>forecast: {data.data["0"].intensity.forecast}</p>
        <p>forecast: {data.data["0"].intensity.actual}</p>
        <p>forecast: {data.data["0"].intensity.index}</p>
      </div>
    </div>
  );