下面介绍的组件从 URL 中获取一个参数,然后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
。我在启动时收到错误“无法读取未定义的属性 Forecastday”。
感谢昵称SwaD的用户,我发现 useEffect 一切正常,为了解决这个问题,需要在渲染之前添加一个值检查,即 而不是
forecast.weather.forecast.forecastday.map
开处方forecast.weather.forecast?.forecastday.map