Javascript React-Redux:TypeError:无法读取属性';用户';空的
我正在尝试创建配置文件页面,以显示单个用户的特定数据。 当我想使用connect获取配置文件状态时,问题会返回null!! 配置文件状态应具有来自后端的有效负载 在Profile.js中Javascript React-Redux:TypeError:无法读取属性';用户';空的,javascript,reactjs,express,redux,axios,Javascript,Reactjs,Express,Redux,Axios,我正在尝试创建配置文件页面,以显示单个用户的特定数据。 当我想使用connect获取配置文件状态时,问题会返回null!! 配置文件状态应具有来自后端的有效负载 在Profile.js中 const Profile = ({ getProfileById, profile: { profile }, auth, match }) => { console.log(profile); useEffect(() => { getProfileById(matc
const Profile = ({ getProfileById, profile: { profile }, auth, match }) => {
console.log(profile);
useEffect(() => {
getProfileById(match.params.id);
}, [getProfileById, match.params.id]);
console.log(profile);
return (
<Fragment>
{profile === null ? (<Spinner/>) : (<Fragment>
<Link to="/Profiles" className="btn btn-light">
Back To Profiles
</Link>
</Fragment>)}
{auth.isAuthenticated &&
auth.loading === false &&
auth.user._id === profile.user._id && (
<Link to="/edit-profile" className="btn btn-dark">
Edit Profile
</Link>
)}
<div className="profile-grid my-1">
// when I pass profile as prop returns null
<ProfileTop profile={profile} />
</div>
</Fragment>
)
}
Profile.propTypes = {
getProfileById : PropTypes.func.isRequired,
profile : PropTypes.object.isRequired,
auth : PropTypes.object.isRequired,
}
const mapStateToProps = (state) => ({
profile: state.profile,
auth: state.auth
});
export default connect(mapStateToProps,{getProfileById}) (Profile)
初始状态
const initialState = {
profile : null,
profiles : [],
repos : [],
loading : true ,
error : {}
}
GET_型面减速器
case GET_PROFILE :
return {...state,
profile : payload,
loading : false
}
配置文件必须从action.payload而不是从payload获取数据
return {
...state,
profile : action.payload,
loading : false
}
Ooopes伙计们,我解决了这个问题,因为片段的结束标记我没有注意到initialState=null,这是在组件中还是在商店中?在商店中..你检查过axios是否工作正常吗?我认为axios的问题我认为它没有将请求发送到我在chrome上检查过的网络工具的api,我不知道我做错了什么!!!我在上面用const{type,payload}=action解构;
case GET_PROFILE :
return {...state,
profile : payload,
loading : false
}
return {
...state,
profile : action.payload,
loading : false
}