Блог

Главная - Вопросы по программированию - Нужна помощь для отображения данных из внешнего API

Нужна помощь для отображения данных из внешнего API

#javascript #reactjs #api #fetch

Вопрос:

Я получил некоторые данные из API, я пытаюсь отобразить данные, но я делаю что-то не так. Кто-нибудь может помочь? Я прикрепил фотографии полученных данных на консоли и свой код[![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

Комментарии:

1. Я не совсем уверен, чего вы ожидаете здесь, но вам нужно узнать, как работают асинхронный код и выборка , а также использование состояния с крючками .

Ответ №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

Ответ №2:

вы забыли какую-то мелочь:
сначала вы забыли набор в крючке useStae, он вам понадобится, чтобы передать ответ из выборки.
Вы забыли установить состояние в fecth. Вам нужно будет добавить условие для визуализации только тогда, когда задано состояние (углерод). вам нужно добавить пустую зависимость для использования эффекта

 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 amp;amp; (
        <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>
  );
}

Изменить изменяемую-тишину-31p3t

Ответ №3:

Вот, пожалуйста, помните, что состояние-это как место для хранения данных для вашего компонента. Когда вы используете fetch, вы получаете данные, и теперь вам нужно сохранить их в своем состоянии. Если вы используете состояние внутри вашего JSX, вы можете получить информацию для отображения. Проверьте журнал консоли, чтобы просмотреть структуру данных, возвращаемую из выборки. Это то, что устанавливается в состояние «данные». Это можно назвать как угодно. Вы можете перебирать его и динамически отображать данные в 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>
  );
Метки: