终极版/阵营：为什么`this.props`不确定

Question

我的代码：

render() { 
    console.log('render, state' + Array.isArray(this.props.users) + ',' + JSON.stringify(this.props.users)); 
    return (
     <section> 
     <div>testing</div> 
     <div>{JSON.stringify(this.props.users)}</div> 
     <ul> 
      {this.props.users.map(user => <li>{user.email}</li>)} 
     </ul> 
     </section> 
    ); 
    } 

两个<div>testing</div>和<div>{JSON.stringify(this.props.users)}</div>做工精细（除去<ul>...</ul>后）。但<ul>...</ul>没有工作。错误是：

Uncaught TypeError: Cannot read property 'map' of undefined 

欢迎任何评论。由于

UPDATE

下列代码做工精细，this.props.users是一个数组，并且所有的控制台日志看起来OK。 我只需要知道为什么<ul>{this.props.users.map(user => <li>{user.email}</li>)}</ul>不起作用。为什么this.props.users在<ul>...</ul>未定义。

render() { 
    console.log('render, state' + Array.isArray(this.props.users) + ',' + JSON.stringify(this.props.users)); 
    return (
     <section> 
     <div>testing</div> 
     <div>{JSON.stringify(this.props.users)}</div> 
     </section> 
    ); 
    } 

上述码的控制台输出（仅两个s）：

render, statetrue,[{"_id":"5831e6df511e","updatedAt":"removed","createdAt":"removed","email":"removed","password":"xxxx","__v":0,"role":"xxx","profile":{"firstName":"test","lastName":"tester"}},{...}, {...}] 

UPDATE

我的代码：

import { connect } from 'react-redux'; 
import { fetchAllUsers } from '../../actions/index'; 

class HomePage extends Component { 
    componentWillMount() { 
    console.log('componentWillMount()'); 
    this.props.fetchAllUsers(); 
    } 

    render() { 
    console.log('render(), ' + Array.isArray(this.props.users) + ',' + JSON.stringify(this.props.users)); 
    return (
     <section> 
     <div>{JSON.stringify(this.props.users)}</div> 
     </section> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    console.log('state:' + JSON.stringify(state));// working fine, and the console.log is OK. not added to this post 
    return { 
     users: state.admin.users 
    } 
} 

export default connect(mapStateToProps, {fetchAllUsers})(HomePage); 

的console.log（一些用户对象中的详细信息已删除。）：

render(), true,[{"_id":"5831","profile":{"firstName":"test","lastName":"tester"}},{"_id":"5831e874cedf511f", "profile":{"firstName":"cccc","lastName":"cc"}},{"_id":"5831120","profile":{"firstName":"cccccccc","lastName":"ccc"}}] 

而且，在网页上显示了this.props.users的字符串。

我的问题是为什么<ul>{this.props.users.map(user => <li>{user.email}</li>)}</ul>不工作，但<div>{JSON.stringify(this.props.users)}</div>工作正常。

我想我已经清楚地描述了我的问题。如果需要更多信息，请告诉我。

更多细节

我admin_reducer.js

import { FETCH_ALL_USERS } from '../actions/types'; 

const INITIAL_STATE = { users:[] }; 

export default function (state = INITIAL_STATE, action) { 
    console.log('users is action.payload:'+JSON.stringify({ users:action.payload })); 
    return Object.assign({}, state, {users:action.payload}); 
    //return { ...state, users:action.payload }; 
} 

我index.js

import adminReducer from './admin_reducer'; 

const rootReducer = combineReducers({ 
    ... 
    admin: adminReducer 
}); 

出口默认rootReducer;

my action.js 
export function fetchAllUsers() { 
    return function(dispatch) { 
    axios.get(`${API_URL}/user/all`) 
    .then(response => { 
     dispatch({ 
     type: FETCH_ALL_USERS, 
     payload: response.data 
     }); 
    }) 
    .catch(response => dispatch(errorHandler(response.data.error))) 
    } 
} 

UPDATE

为什么console.log(this.props.users)控制台日志是[object Object],[object Object],[object Object]？

Answer 1

首先，根据react docs，异步请求应在componentDidMount方法内进行。

其次，要确保你不是想map未初始化数组，使用此：

<ul>{(this.props.users || []).map(user => <li>{user.someProperty}</li>)}</ul>

这应包括在这情况下，你忘了初始化由于某种原因，阵列。

Answer 2

您可以拨打这个没有错误..

JSON.stringify(this.props.users) 

...因为它只是输出 “未定义”）。这是有效的。但是，如果你试图调用上返回当然是失败的，未定义的方法...

// Following tries to call undefined.map(), which is of course wrong 
this.props.users.map(user => <li>{user.email}</li>) 

常用简写，以解决您的方案采用了“短路运算符”（像一个匆匆“如果（是真的）”）...

<ul>{this.props.user && this.props.users.map(user => <li>{user.email}</li>)}</ul> 

^^请注意 “this.props.user & &”，这将阻止以下被称为如果this.props.user.map（） .props.user为空或未定义