Компонент представленный ниже берёт из 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".