0

Компонент представленный ниже берёт из URL'a параметр, после чего делает dispatch с данным параметром, но код в useEffect даже не думает срабатывать, в чём проблема?

import React, {FC, useEffect, useState} from 'react';
import { useParams } from 'react-router-dom';
import { useAppDispatch, useAppSelector } from '../store/slices/customHooks';
import cn from 'classnames';
import ForecastItem from './ForecastItem';
import "./css/Forecast.css"
import "./css/Weather.css"
import { getNewForecast } from '../store/actions/forecastActions';

const Forecast: FC = () => {
    const dispatch = useAppDispatch()
    const {city} = useParams()

    useEffect(() => {
        debugger;
        if (city) {
            dispatch(getNewForecast(city))
        }
    }, [])

    const forecast = useAppSelector(state => state.forecastSlice)

    return (
        <>
            {forecast.isLoading && <h1 className='loader'>Loading...</h1>}
            <h1 className="title">The weather in {city} for 7 days</h1>
            <div className="forecastContainer">
                {forecast.weather.forecast.forecastday.map(i => {
                    return (
                        <ForecastItem
                            date = {i.date}
                            conditions = {i.day.condition}
                            maxTemp = {i.day.maxtemp_c}
                            minTemp = {i.day.avgtemp_c}
                            windSpeed = {i.day.maxwind_kph}
                            sunrise = {i.astro.sunrise}
                            sunset = {i.astro.sunset}
                            precipChance = {Math.ceil((i.day.daily_chance_of_rain + i.day.daily_chance_of_snow) / 2)}
                            />
                    )
                })}
            </div>
        </>
    )
}

export default Forecast

Функции useAppSelector и useAppDisptach - это просто типизированные версии useSelector, useDispatch. При запуске появляется ошибка "Can't read property forecastday of undefined".

9
  • Вы уверены, что у вас перменная city вообще меняется?
    – SwaD
    Commented 23 июн. 2023 в 7:52
  • Я использую её в массиве зависимостей, просто для того чтобы он не был пуст (насколько я помню useEffect может иногда не срабатывать, если он пустой), т.е. чтобы useEffect вызывался только 1 раз при создании компонента. Уже пробовал убирать её, но толка от этого никакого.
    – woolMe
    Commented 23 июн. 2023 в 7:56
  • useEffect срабатывает 1 раз при установке компонента в DOM при пустом массиве зависимостей. И каждый раз, если меняется значение у любой из переменных, которые есть в массиве зависимостей. Если у вас переменная city не меняется, то и useEffect срабатывать не будет.
    – SwaD
    Commented 23 июн. 2023 в 8:04
  • Убрал переменную из массива, но всё равно ничего не изменилось, в дебагере dispatch'a как-будто вообще не происходит.
    – woolMe
    Commented 23 июн. 2023 в 8:08
  • Добавьте в useEffect вывод в консоль и посмотрите, чему у вас там равен city. Скорее всего он пуст, поэтому ваш if не пропускает.
    – SwaD
    Commented 23 июн. 2023 в 8:10

1 ответ 1

1

Благодаря пользователю с ником SwaD, я выяснил, что с useEffect'ом всё нормально, для решения данной проблемы необходимо было добавить проверку значений перед рендером, т.е. вместо forecast.weather.forecast.forecastday.map прописать forecast.weather.forecast?.forecastday.map

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.