类型错误：无法读取未定义的属性"map"，如何纠正？

Question

我正在使用React和Redux从解析服务器中获取数据。调度进行得很好，但我无法在函数中显示来自mapstatetoprops的数据。我遗漏了什么吗？请帮我摆脱这个

这是我的组件简介阅读器.js

import React,{useEffect} from 'react';
import Cover_Image from './Cover_Image.jpg';
import Profile_Pic from './Profile_Pic.svg';
import './ProfileHeader.css';
import {connect} from 'react-redux';
import {fetchUserProfile} from '../../Redux/UserProfile-Redux/UserProfileActionMethods';

function ProfileHeader({Data,fetchUserProfile}){
useEffect(()=>{fetchUserProfile();},[]);
return Data.isLoading ? (<h2>Loading...</h2>) :
Data.error ? (<h2>{Data.error}</h2>) :
(
<div>
{
Data.userprofiles.map((user)=>{
return(
<div> 
<p>{user.attributes.handle}</p>
</div>
)
})
}
</div>
)
}   

const mapStatetoProps = (state) =>{
return{
//from the rootreducer
Data:state.UserProfile
}
}
const mapDispatchtoProps = (dispatch) =>{
return{
fetchUserProfile:()=>{dispatch(fetchUserProfile())},dispatch,
}
}
export default connect(mapStatetoProps,mapDispatchtoProps)(ProfileHeader)

它的行动方法

import Parse from 'parse/dist/parse.min.js';
import { FETCH_USERPROFILE_FAILURE, FETCH_USERPROFILE_REQUEST, FETCH_USERPROFILE_SUCCESS } from './UserProfileActions';
const params = {username:"prvnngrj"}
export const fetchUserProfileRequest = () => {
return{
type:FETCH_USERPROFILE_REQUEST
}
}
export const fetchUserProfileSuccess = (userprofiles) =>{
return{
type:FETCH_USERPROFILE_SUCCESS,
payload:userprofiles
}
}
export const fetchUserProfileFailure = (error) =>{
return{
type:FETCH_USERPROFILE_FAILURE,
payload:error
}
}
export const fetchUserProfile = () => {
return async dispatch =>{
dispatch(fetchUserProfileRequest())
try{
const responsedata = await Parse.Cloud.run("GetUserProfileForUsername", params);
const userprofiles = responsedata;
dispatch(fetchUserProfileSuccess(userprofiles))

}
catch(error){
const errorMessage = error.message
dispatch(fetchUserProfileFailure(errorMessage))
}
}
}

这是减速器。

import { FETCH_USERPROFILE_FAILURE, FETCH_USERPROFILE_REQUEST, FETCH_USERPROFILE_SUCCESS } from "./UserProfileActions"
const initialState = {
isLoading:false,
userprofiles:[],
error:''
}
export const UserProfileReducer = (state=initialState,action)=>{
switch(action.type){
case FETCH_USERPROFILE_REQUEST :
return{...state,
isLoading:true
}
case FETCH_USERPROFILE_SUCCESS :
return{
isLoading:false,
usersprofiles:action.payload,
error:''
}    
case FETCH_USERPROFILE_FAILURE :
return{
isLoading:false,
usersprofiles:[],
error:action.payload
}    
default:
return state    
}
}

编辑：很抱歉出现错误，我在userReducer中输入了错误的userProfiles，所以它无法接受数据。解决方案已经找到了！！非常感谢您抽出时间。

Answer 1

Data.userProfiles不是数组或为null。请检查类型或确保将其初始化为空数组。

Answer 2

我将为null | undefined添加另一个检查，并且数组具有userprofiles的项

return Data.isLoading ? (<h2>Loading...</h2>) :
Data.error ? (<h2>{Data.error}</h2>) :
Data.userprofiles && Data.userprofiles.length > 0 ? 
(
<div>.....</div>
) : null

Answer 3

映射时，Data.userprofiles的内容尚未定义。尝试这样的可选链接：

Data?.userprofiles?.map((user) => {
...