如何在反应中呈现对象的属性？
如何在反应中呈现对象的属性？
提问于 2016-11-22 03:33:30
我应该在哪里处理这个组件没有加载所需的state的问题？
我的呈现方法会导致以下错误.
Uncaught TypeError: Cannot read property 'email' of undefined...even虽然JSON.stringify行告诉我电子邮件属性确实存在(最终)。
console.log在mapStateToProps中确认状态首先加载，没有任何user属性(因此导致错误)。
看看我天真地试图在构造函数方法中解决这个问题。这不管用。
处理这种情况的正确方法是什么？渲染方法中的一些条件？也试过了，但还是没有运气。
import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import * as actions from '../actions';
class Feature extends Component {
constructor(props){
super(props);
this.state = {
'auth': {
'user':{
email:'',
id:''
}
}
}
}
componentWillMount() {
this.props.fetchMessage(); // puts the user object into state
}
render() {
return (
<div className="feature">
Here is your feature
{JSON.stringify(this.props.user , null, 2)}
{this.props.user.email}
</div>
);
}
}
function mapStateToProps(state) {
console.log('state',state);
return { user: state.auth.user }
}
export default connect(mapStateToProps, actions)(Feature);/行动/
export function fetchMessage(){
return function(dispatch){
axios
.get(ROOT_URL, {
headers: {
authorization: localStorage.getItem('token')
}
})
.then((response) => {
dispatch({
type: FETCH_MESSAGE,
payload: response.data.user
})
})
}
}/
var authReducer = (state={}, action) => {
console.log('action.payload',action.payload);
switch(action.type){
case AUTH_USER: return {...state, error: '', authenticated: true};
case UNAUTH_USER: return {...state, error: '', authenticated: false};
case AUTH_ERROR: return {...state, error: action.payload};
case FETCH_MESSAGE: return {...state, user: {
email: action.payload.email,
id: action.payload._id
}};
default: return state;
};
};回答 2
Stack Overflow用户
回答已采纳
发布于 2016-11-22 04:00:59
Redux使用一个名为全局状态的store，它位于组件之外。
在您的constructor中有一个this.state = {...}语句。这是一个只对Feature组件可用的本地状态。
来自react-redux的react-redux基本上将store中的信息连接到组件props，因此称为mapStateToProps。
把你的mapStateToProps编辑成.
function mapStateToProps(state) {
const { auth: { user = {} } = {}} = state;
return {
user
}
}它所做的是尝试从存储中提取user属性，如果它还不存在，将其设置为空对象。您的错误是由于您的mapStateToProps访问尚未存在的用户属性。为了避免此问题，您可能希望将默认值设置为initialState。
Stack Overflow用户
发布于 2016-11-22 06:21:45
下面是正在发生的事情。您正在为user对象发出服务器请求，一旦成功，接收的对象将存储在您的redux存储中。在执行此操作时，您的组件呈现如下：
- 您已经向服务器发起了请求，这意味着您的存储区中目前没有
user，因此组件是用this.props.userundefined呈现的。 - 您的请求成功，
user对象存储在您的存储区中。当这种情况发生时，react-redux将使用user对象重新呈现您的组件，并且this.props.user在您的组件中可用。 在第一步中，由于this.props.user不可用，您在访问this.props.user.email时会收到一个错误。尽管@jpdelatorre的回答非常好，但您可以做的另一件事是在render方法中添加一个检查。 呈现(){ let user = this.props.user欧元/ {}；.{user.email} .}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40733346
复制相关文章
相似问题
腾讯云开发者
