Блог

Главная - Вопросы по программированию - Дочерний компонент не отображается повторно, даже если хранилище redux обновлено правильно

Дочерний компонент не отображается повторно, даже если хранилище redux обновлено правильно

#reactjs #react-redux #parent-child #rerender

Вопрос:

У меня есть родительский компонент, который использует dispatch для обновления хранилища в redux, чем я беру данные хранилища с помощью UseSelector и передаю их дочернему компоненту.

в дочернем компоненте при первом отображении данные не определены, а при втором отображении данные исправлены, но дочерний компонент не выполняет повторную визуализацию и не отображает данные.

попробовал несколько решений из других сообщений StackOverflow и из Google и не могу понять

заранее спасибо.

это родители:

 function FullWeather() {

const dispatch = useDispatch()
const sevenDaysForecast = useSelector(state => state.sevenDaysForecast);
const {weather, loading, error} = sevenDaysForecast;

useEffect(() => {
    dispatch(weekForecast());

}, [dispatch]);


return (

    <div style={{borderRadius: '25px', backgroundImage: 'url('  mountainsBackground  ')', backgroundSize: 'cover'}}>
        <CurrentWeather/>
        <SevenDaysWeather data={weather} />
    </div>
)

};

компонент «мой ребенок»:

 const SevenDaysWeather = ({data}) => {

console.log(data); //=> log correct data on second render

return (

    <div className="weather-table">

        <h5 className="sevenDays-Heading">
            Next 7 Days...
        </h5>

        <div className="d-flex justify-content-between sevenDays-Row">
            {data?.map( (dayWeather, index) => (
                    <div className="eachDay-div" key={index}>
                        <p className="sevenDays-p sevenDays-day" >{dayWeather.day}</p>
                        <img  className="sevenDays-img"  src={dayWeather.icon} alt=''/>
                        <p className="sevenDays-p sevenDays-temp" >{dayWeather.temp}°</p>
                    </div>
                ))}
        </div>

    </div>

);

};

мой редуктор:

 export const sevenDayWeatherReducer = (state={}, action) => {

switch (action.type) {

    case SEVEN_DAYS_WEATHER_REQUEST:
        return {loading: true};

    case SEVEN_DAYS_WEATHER_SUCCESS:
        return {loading: false, weather: action.payload};

    case SEVEN_DAYS_WEATHER_FAIL:
        return {loading: false, error: action.payload};

    default:
        return state;
}
};

my action:

 export const weekForecast = () => async (dispatch) => {

try {

    dispatch({ type: SEVEN_DAYS_WEATHER_REQUEST });

    const weekDays =['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
    let sevenDayWeatherData = [];

    geolocation.getCurrentPosition(async (err, position) => {
            await axios.post('/weather', {lon: position.coords.longitude, lat: position.coords.latitude, type: SEVEN_DAYS_WEATHER})
                .then(response => {
                    const sevenDaysWeather = response.data.daily;
                    for(var i = 1; i < sevenDaysWeather.length; i  )
                    {
                        const date = new Date(sevenDaysWeather[i].dt * 1000)
                        const forecast = {
                            day: weekDays[date.getDay()],
                            temp: beautifulTemp(sevenDaysWeather[i].temp.day),
                            icon: "http://openweathermap.org/img/wn/"   sevenDaysWeather[i].weather[0].icon   "@2x.png"
                        }
                        sevenDayWeatherData.push(forecast)
                    }
                })
                .catch(e => console.log(e))
    });



    dispatch({ type: SEVEN_DAYS_WEATHER_SUCCESS, payload: sevenDayWeatherData });


} catch (err) {

}

};
Метки: ,