Рендеринг ReactJS Проблема с получением API

avatar
pedrofromperu
8 августа 2021 в 23:21
36
1
0

Я пытаюсь получить API WeatherApp, используя геолокацию. Моя проблема заключается в рендеринге: Это не позволяет мне отображать страницу до получения (но после того, как мне каким-то образом удается получить, код работает).

Возврат сообщения об ошибке:

Type Error : Cannot Read Property 'temp' of undefined

import React, { useState } from 'react';
import './App.css';
import Axios from 'axios';

function App() {

  const [ positionLat, setPositionLat ] = useState('') ;
  const [ positionLong, setPositionLong] = useState('') ;
  
  navigator.geolocation.getCurrentPosition(function(position) {
    setPositionLat(position.coords.latitude);
    setPositionLong(position.coords.longitude);
  });

  const [weather, setWeather] = useState('');

  const fetchingWeather = () => {
    Axios.get(
      `https://api.openweathermap.org/data/2.5/weather?lat=${positionLat}&lon=${positionLong}&appid={API_KEY}&units=metric`)
    .then((res) => {
      console.log(res.data.main.temp)
      setWeather(res.data)
    })
  }

// this line is returning the error 
 console.log(weather.main.temp)

  return (
    <div className="App">
      <p>lattitude :{positionLat}</p>
      <p>longitude :{positionLong}</p>
      <button onClick={fetchingWeather}>Cliquez moi pour fetch</button>
    </div>
  );
}

export default App;
Источник
Dave Newton
8 августа 2021 в 23:31
1

Состояние настройки асинхронное; ваш console.log будет запущен до завершения запроса.

Phil
8 августа 2021 в 23:34
0

Вы не устанавливаете состояние weather, пока не выполните fetchingWeather(), и вы вызываете его только при нажатии кнопки. Рассматриваемая строка console запускается, когда ваш компонент визуализирует, поэтому weather на этом этапе будет пустой строкой. При этом вы нигде не используете weather, совершенно неясно, в чем проблема.

pedrofromperu
8 августа 2021 в 23:37
0

но как мне это сделать?

Ответы (1)

avatar
Robin
8 августа 2021 в 23:39
0

Извлечение данных о погоде и настройка состояния погоды выполняются асинхронно, ваша консоль записывает weather.main.temp до завершения запроса. И получение данных является побочным эффектом в reactjs. Поэтому вам предлагается получить информацию о погоде с помощью крючков useEffect и установить там состояние погоды.

import React, { useState, useEffect } from 'react';
import './App.css';
import Axios from 'axios';

function App() {

  const [ positionLat, setPositionLat ] = useState('') ;
  const [ positionLong, setPositionLong] = useState('') ;
  
  navigator.geolocation.getCurrentPosition(function(position) {
    setPositionLat(position.coords.latitude);
    setPositionLong(position.coords.longitude);
  });

  const [weather, setWeather] = useState('');

  const fetchingWeather = () => {
    Axios.get(
      `https://api.openweathermap.org/data/2.5/weather?lat=${positionLat}&lon=${positionLong}&appid={API_KEY}&units=metric`)
    .then((res) => {
      console.log(res.data.main.temp)
      setWeather(res.data)
    })
  }


  useEffect(() => {
    fetchingWeather();
  }, [weather])

  return (
    <div className="App">
      <p>lattitude :{positionLat}</p>
      <p>longitude :{positionLong}</p>
      <button onClick={fetchingWeather}>Cliquez moi pour fetch</button>
    </div>
  );
}

export default App;

Это должно сработать.

pedrofromperu
9 августа 2021 в 00:51
0

Нет, это та же ошибка. Я проверяю useEffects, но я просмотрел 3 или 4 туториала по этому поводу и уже поигрался с ним. Но здесь это уже слишком сложно для меня.