无法解构“未定义"或“空"的属性“用户"

本文介绍了无法解构“未定义"或“空"的属性“用户"的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

使用 redux 检索用户信息时出错.我想从数据库中获取用户信息(姓名、密码和头像的地址)，然后对其进行编辑.

我正在使用 nodejs、express、react、redux 和 jwt.

Actions/user.js从 'axios' 导入 axios；从 './alert' 导入 {setAlert}；从./types"导入 {GET_USER, USER_ERROR}；//获取当前用户资料export const getCurrentUser = () =>异步调度 =>{尝试 {const res = await axios.get('/api/users/me');派遣({类型:GET_USER，有效载荷:res.data});} 抓住(错误){派遣({类型:USER_ERROR，有效载荷:{味精:err.response.statusText，状态:err.response.status}});}};减速器/user.js从'../actions/types' 导入 {GET_USER, USER_ERROR, CLEAR_USER};常量初始状态 = {用户:空，用户:[],加载:真实，错误: {}}导出默认函数(状态 = 初始状态，动作){const {类型，有效载荷} = 动作；开关(类型){案例 GET_USER:返回{...状态，加载:假，用户:有效载荷};案例 USER_ERROR:返回{...状态，错误:有效载荷，加载:假};默认:返回状态；}}组件/edituser/EditUser.js从反应"导入反应、{useState、Fragment、useEffect}；从 'prop-types' 导入 PropTypes；从'react-redux'导入{connect}；从../../actions/user"导入 {getCurrentUser}；从 'react-router-dom' 导入 {Link, withRouter};从'../layout/Alert'导入警报；从 '../util/InputSelector' 导入 InputSelector；const 编辑用户 = ({用户:{用户，加载}，获取当前用户，历史}) =>{const [formData, setFormData] = useState({名称: ''，电子邮件: ''，密码: ''});useEffect(()=>{获取当前用户()；});返回 (<片段><div className="col-md-12 mb-3"><div className="card"><div className="card-body"><div className="row"><div className="col-md-3 d-flex align-items-center">
<img className="img-fluid" src={'/uploads/noImg.jpg'}/>

Actions/user.js import axios from 'axios'; import {setAlert} from './alert'; import {GET_USER, USER_ERROR} from './types'; //Get current users profile export const getCurrentUser = () => async dispatch => { try { const res = await axios.get('/api/users/me'); dispatch({ type: GET_USER, payload: res.data }); } catch (err) { dispatch({ type:USER_ERROR, payload:{msg: err.response.statusText, status: err.response.status} }); } }; Reducers/user.js import {GET_USER, USER_ERROR, CLEAR_USER} from '../actions/types'; const initialState = { user: null, users: [], loading: true, error: {} } export default function(state = initialState, action) { const {type, payload} = action; switch(type){ case GET_USER: return{ ...state, loading:false, user:payload }; case USER_ERROR: return{ ...state, error:payload, loading: false }; default: return state; } } Components/edituser/EditUser.js import React, {useState, Fragment, useEffect} from 'react'; import PropTypes from 'prop-types'; import {connect} from 'react-redux'; import {getCurrentUser} from '../../actions/user'; import {Link, withRouter} from 'react-router-dom'; import Alert from '../layout/Alert'; import InputSelector from '../util/InputSelector'; const EditUser = ({ user:{user,loading}, getCurrentUser, history}) => { const [formData, setFormData] = useState({ name: '', email: '', password: '' }); useEffect(()=>{ getCurrentUser(); }); return ( <Fragment> <div className="col-md-12 mb-3"> <div className="card"> <div className="card-body"> <div className="row"> <div className="col-md-3 d-flex align-items-center"> <div className="img"> <img className="img-fluid" src={'/uploads/noImg.jpg'} /> </div> </div> <div className="col-md-9"> <form> <div className="form-group"> <label><i className="fas fa-user"></i> Username</label> <input type="text" name="skills" className="form-control" placeholder="Edita tu nombre de usuario" /> </div> <div className="form-group"> <label><i className="fas fa-envelope"></i> Email</label> <input type="text" name="skills" className="form-control" placeholder="Edita tu email" /> </div> <div className="form-group"> <label><i className="fas fa-key"></i> Contraseña</label> <input type="text" name="skills" className="form-control" placeholder="Edita tu nombre de contraseña" /> </div> <div className="form-group" > <label><i class="fas fa-upload"></i> Imagen De Perfil</label> <InputSelector/> </div> <div className="col-md-12 text-center"> <button className="btn btn-primary btn-block"><i class="fas fa-check"></i> Guardar</button> </div> </form> </div> </div> </div> </div> </div> </Fragment> ); }; EditUser.propTypes = { getCurrentUser: PropTypes.func.isRequired, user: PropTypes.object.isRequired }; const mapStateToProps = state => ({ user: state.user }); export default connect(mapStateToProps, {getCurrentUser}) (withRouter(EditUser));