終極版/陣營：爲什麼`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爲空或未定義