Задать вопрос
@Mysianio
вайти в айти

Почему не обновляется компонент после принятия props из redux?

Здравствуйте, случилась такая проблема

Функциональный компонент:
import React, {useEffect, useState} from 'react';
import {connect} from 'react-redux';
import {getWeather} from '../actions/getWeather.js';

const Weather = (props) =>{

  const [isFetching, setFetching] = useState(true);

  useEffect(()=>{
    let lat;
    let long;
    navigator.geolocation.getCurrentPosition(position =>{
      lat = position.coords.latitude+17;
      long = position.coords.longitude;
      props.onGetWeather(lat,long)
    });
    setFetching(props.weather.isFetching)
  },[])

  if(isFetching){
    return(
      <div id='loading'>
        <h1>Loading... {props.weather.error}</h1>
      </div>
    )
  }else{
      return(
        <React.Fragment>
            <React.Fragment>
              <h1>{props.weather.data.timezone}</h1>
              <div className='weatherWrap'>
              <h3>{props.weather.data.currently.temperature}</h3>
              <h5>{props.weather.data.currently.summary}</h5>
              </div>
            </React.Fragment>
        </React.Fragment>
      )
  }
}

export default connect(
  state =>({
    weather: state.weather,
  }),
  dispatch =>({
    onGetWeather: (lat, long) =>{
      dispatch(getWeather(lat, long))
    }
  })
)(Weather)


Дело в том, что когда onGetWeather фетчит данные и они приходят в редакс (1-2 секунды), компонент попросту не обновляется, чтобы я не делал.
В redux приходят данные:
{
    isFetching: false,
    data: (данные с сервера)
}

Компонент обновляется и все работает как нужно только если я нативно его обновлю (Поставлю кнопку, которая обновляет стэйт, например)
В чем проблема? Как это исправить?
Перепробовал все и схожу с ума помаленьку.
  • Вопрос задан
  • 400 просмотров
Подписаться 2 Средний Комментировать
Решения вопроса 1
FreeMan94
@FreeMan94
Frontend developer
У вас должен срабатывать useEffect при изменении пропсов, то есть, нужно указать в массиве props
useEffect(()=>{
   ...
},[props])

Поставьте плагин eslint-plugin-react-hooks он помогает отлавливать такие недочёты.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы