Почему не выводятся данные из запроса в заголовок?

Question

Почему не выводятся данные из запроса в заголовок?

Рейтинг: 0Ответов: 2Опубликовано: 09.03.2023

Почему не выводятся данные из запроса в заголовок <h1 className="place" id="place">City: {props.data.name}</h1> ?

function installWeather(props) {
    const request = new Promise((resolve, reject) => {
        console.log('Запрос данных на сервер...')
        fetch('https://api.openweathermap.org/data/2.5/weather?q=LVIV&units=metric&APPID=5d066958a60d315387d9492393935c19')
            .then(response => {
                if (response.ok) {
                    return resolve(response.json());
                } else {
                    reject('Что-то пошло нет так');
                }

            });
    });
    request
        .then(data => {
            return (
                <div className='wrapper'>
                    <div className='container'>
                        <h1 className="place" id="place">City: {props.data.name}</h1>
                        <p className="temp" id="temp"></p>
                        <p className="pressure" id="pressure"></p>
                        <p className="description" id="description"></p>
                        <p className="humidity" id="humidity"></p>
                        <p className="speed" id="speed"></p>
                        <p className="degree" id="degree"></p>
                        <img className="image" id="image" src="" alt="clouds" title="Weather"/>
                    </div>
                </div>
            )
        })
}
export default installWeather;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

javascript reactjs

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

В React запрос данных должен быть написан в методе жизненного цикла компонента, например, в методе componentDidMount или useEffect. Также результат запроса данных надо сохранить в состоянии компонента и использовать для рендеринга компонента.

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

function Weather() {
  const [weatherData, setWeatherData] = useState(null);

  useEffect(() => {
    console.log('Запрос данных на сервер...');
    fetch('https://api.openweathermap.org/data/2.5/weather?q=LVIV&units=metric&APPID=5d066958a60d315387d9492393935c19')
      .then(response => {
        if (response.ok) {
          return response.json();
        } else {
          throw new Error('Что-то пошло нет так');
        }
      })
      .then(data => setWeatherData(data))
      .catch(error => console.error(error));
  }, []);

  if (!weatherData) {
    return <div>Loading...</div>;
  }

  return (
    <div className='wrapper'>
      <div className='container'>
        <h1 className="place" id="place">City: {weatherData.name}</h1>
        <p className="temp" id="temp">{weatherData.main.temp}</p>
        <p className="pressure" id="pressure">{weatherData.main.pressure}</p>
        <p className="description" id="description">{weatherData.weather[0].description}</p>
        <p className="humidity" id="humidity">{weatherData.main.humidity}</p>
        <p className="speed" id="speed">{weatherData.wind.speed}</p>
        <p className="degree" id="degree">{weatherData.wind.deg}</p>
        <img className="image" id="image" src="" alt="clouds" title="Weather"/>
      </div>
    </div>
  );
}

export default Weather;

Здесь используется хук useEffect, чтобы выполнить запрос данных, когда компонент Weather монтируется в DOM. Результат запроса сохраняется в состоянии компонента weatherData, и после того, как данные загружены, они используются для рендеринга компонента. Если данные еще не загружены, то вместо компонента выводится "Loading...".

Answer 2

▲ 0

Братка, ты забыл перед фигурными скобками поставить $. И ещё братка, fetch и так возвращает promise, зачем лишний раз экземпляр создавать, держи попроще код. Вынеси эту функцию в отдельный файл, экспортируй, и используй где понадобится.

const someContent = document.querySelector('.content');

async function getRosources(url) {
  const request = await fetch(url);

  if (!request.ok) {
    throw new Error(`Failed to fetch ${url}: ${request.status}`);
  }

  return await request.json();
}

getRosources(
  'https://api.openweathermap.org/data/2.5/weather?q=LVIV&units=metric&APPID=5d066958a60d315387d9492393935c19'
)
  .then((data) => {
    someContent.innerHTML = `
    <h1 className="place" id="place">City: ${data.name}</h1>
    <p className="temp" id="temp"></p>
    <p className="pressure" id="pressure"></p>
    <p className="description" id="description"></p>
    <p className="humidity" id="humidity"></p>
    <p className="speed" id="speed"></p>
    <p className="degree" id="degree"></p>
    <img className="image" id="image" src="" alt="clouds" title="Weather"/>
    `;
  })
  .catch((error) => {
    console.log(error);
  });

Почему не выводятся данные из запроса в заголовок?

Ответы