Здравствуйте, случилась такая проблема
Функциональный компонент:
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: (данные с сервера)
}
Компонент обновляется и все работает как нужно только если я нативно его обновлю (Поставлю кнопку, которая обновляет стэйт, например)
В чем проблема? Как это исправить?
Перепробовал все и схожу с ума помаленьку.