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

Question

[Дмитрий Ярощук]

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

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

Comments

[0xD34F]

А что, погуглить пример вывода результата запроса было никак?

[imko]

Дата разве является полем пропса?

Answer 1

[Lapita12]

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('Что-то пошло нет так');
        }
      });
  });
  
  return request
    .then(data => {
      return (
        <div className='wrapper'>
          <div className='container'>
            <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"/>
          </div>
        </div>
      )
    })
}

export default installWeather;

Comments

[Дмитрий Ярощук]

Lapita12 Попробовал ваш способ но так ничего и не выводится

[Lapita12]

Дмитрий Ярощук,

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

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

  useEffect(() => {
    fetch(`https://api.openweathermap.org/data/2.5/weather?q=${props.city}&units=metric&appid=YOUR_APP_ID`)
      .then(response => response.json())
      .then(data => setWeatherData(data))
      .catch(error => console.log(error));
  }, [props.city]);

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

  const { name, main, weather, wind } = weatherData;
  const { temp, humidity, pressure } = main;
  const { description, icon } = weather[0];
  const imgUrl = `http://openweathermap.org/img/w/${icon}.png`;
  const windSpeed = wind.speed;
  const windDegree = wind.degree;

  return (
    <div className="wrapper">
      <div className="container">
        <h1 className="place" id="place">City: {name}</h1>
        <p className="temp" id="temp">Temperature: {temp}&deg;C</p>
        <p className="pressure" id="pressure">Pressure: {pressure} hPa</p>
        <p className="description" id="description">Description: {description}</p>
        <p className="humidity" id="humidity">Humidity: {humidity}%</p>
        <p className="speed" id="speed">Wind speed: {windSpeed} m/s</p>
        <p className="degree" id="degree">Wind degree: {windDegree}&deg;</p>
        <img className="image" id="image" src={imgUrl} alt="Weather" title="Weather"/>
      </div>
    </div>
  );
}

export default InstallWeather;

Убедитесь что вы заменили YOUR_APP_ID на свой API OpenWeatherMap

[Lapita12]

Lapita12,

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

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

  useEffect(() => {
    fetch(`https://api.openweathermap.org/data/2.5/weather?q=${props.city}&units=metric&appid=YOUR_APP_ID`)
      .then(response => response.json())
      .then(data => setWeatherData(data))
      .catch(error => console.log(error));
  }, [props.city]);

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

  const { name, main, weather, wind } = weatherData;
  const { temp, humidity, pressure } = main;
  const { description, icon } = weather[0];
  const imgUrl = `http://openweathermap.org/img/w/${icon}.png`;
  const windSpeed = wind.speed;
  const windDegree = wind.deg;

  return (
    <div className="wrapper">
      <div className="container">
        <h1 className="place" id="place">City: {name}</h1>
        <p className="temp" id="temp">Temperature: {temp}&deg;C</p>
        <p className="pressure" id="pressure">Pressure: {pressure} hPa</p>
        <p className="description" id="description">Description: {description}</p>
        <p className="humidity" id="humidity">Humidity: {humidity}%</p>
        <p className="speed" id="speed">Wind speed: {windSpeed} m/s</p>
        <p className="degree" id="degree">Wind degree: {windDegree}&deg;</p>
        <img className="image" id="image" src={imgUrl} alt="Weather" title="Weather"/>
      </div>
    </div>
  );
}

export default InstallWeather;

Исправлена ошибка в моём первом варианте ввиде ответа, попробуйте сразу оба

[Дмитрий Ярощук]

Lapita12 Могли бы вы добавить комментарии как работает ваш код ?

[Lapita12]

Lapita12,
В вызове функции installWeather не передается никаких данных. Следует передать данные в качестве аргумента при вызове функции, например:

installWeather({ data: { name: 'Lviv' } })


Также, в запросе данный город жестко задан: https://api.openweathermap.org/data/2.5/weather?q=.... Если вы хотите передать название города динамически, то его нужно передавать в запросе.

[Lapita12]

В основном ответе.
Проблема заключается в том, что я попытался возвращать JSX-разметку из асинхронной функции. Это не работает так.
Кроме того, жестко задали город в строке запроса, а должны передавать его в качестве аргумента при вызове функции.

[Lapita12]

Дмитрий Ярощук,
Этот код представляет собой функциональный компонент React с использованием хуков useState и useEffect.

Хук useState используется для хранения данных о погоде. useState возвращает массив из двух элементов: переменной и функции для ее обновления. Эти переменная и функция передаются в состояние компонента.

Хук useEffect позволяет выполнять эффекты (например, перерисовать компонент) каждый раз, когда происходят изменения. В случае этого компонента useEffect выполняет запрос к API OpenWeatherMap с переданным в качестве аргумента названием города, которое получает из props. Когда компонент монтируется и меняется название города, useEffect вызывается и обновляет данные.

Если данные о погоде еще не получены, то компонент возвращает разметку Loading... Для рендеринга данных используется деструктуризация переменных name, main, weather, wind, после чего затемнения данных выводятся в тегах разметки "h1", "p" и "img".

Важно заметить, что заполнить YOUR_APP_ID своим ключом API OpenWeatherMap.