从react redux中销毁数据时出错.为什么会出现错误以及如何解决

Question

这是我试图获取用户数据的概要文件组件，但在代码的突出显示部分出现了错误。为什么userData未定义？？

import React, {useEffect} from 'react';
import {useDispatch, useSelector} from 'react-redux';
import { getUserProfile } from '../../actions/userActions';
import Styles from './Profile.module.scss';
const Profile = (props) => {
const userId = props.match.params.id;
const dispatch = useDispatch();
const userLogin = useSelector(state => state.userLogin);
const {userInfo} = userLogin;
**const userProfile = useSelector(state => state.userProfile);
const {loading, error, userData} = userProfile;
const {posts, data} = userData;**
useEffect(() => {
if(!userInfo){
props.history.push('/login');
}else{
dispatch(getUserProfile(userId));
}
}, [dispatch,userId])
return (
<section>
<div className={Styles.Container}>
<h1>{data.userName}</h1>
<h1>{data.followers.length} followers</h1>
<h1>{data.following.length} following</h1>
<h1>{posts.length} posts</h1>
</div>
</section>
)
}
export default Profile

这是userProfile-的Reducer文件

export const userProfileReducer = (state={ userData: {}}, action) => {
switch(action.type){
case GET_USER_PROFILE_REQUEST:
return { loading: true, ...state, }

case GET_USER_PROFILE_SUCCESS:
return { ...state, loading: false, userData: action.payload}

case GET_USER_PROFILE_FAIL:
return { loading: false, error: action.payload}
default: return state;
}
}

我收到这个错误

TypeError: Cannot destructure property 'posts' of 'userData' as it is undefined. Profile

Answer 1

我们不可能知道为什么它是未定义的，因为您没有显示在redux存储中添加userProfile状态的位置。

我认为CCD_；加载"；在渲染过程中，因此对于第一次渲染，userData是未定义的。

为了避免这个错误，请尝试添加一个if语句：

useEffect(() => {
if(!userInfo){
props.history.push('/login');
}else{
dispatch(getUserProfile(userId));
}
}, [dispatch,userId])
if (userData) {
const {posts, data} = userData;**
return (
<section>
<div className={Styles.Container}>
<h1>{data.userName}</h1>
<h1>{data.followers.length} followers</h1>
<h1>{data.following.length} following</h1>
<h1>{posts.length} posts</h1>
</div>
</section>
)
}
return <div>Loading...</div>

Answer 2

问题是case GET_USER_PROFILE_FAIL返回属性为loading和error的对象，并且不从...state复制任何其他属性。这将导致userData属性变为undefined。

如果这是所需的行为，那么您需要在组件中检查undefined并显示某种错误消息。