Reduxの/が反応：なぜ `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> 
    ); 
    } 

上記コードのコンソール出力（2つだけ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（一部削除されたUserオブジェクトの詳細）：

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メソッド内で行う必要があります。

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

これは場合にそれをカバーする必要がありますが、何らかの理由で配列を初期化するのを忘れ：

第二に、あなたはmapに初期化されていない配列をしようとしていないことを確認するために、これを使用します。それだけで） "未定義" を出力するので

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がnullまたは定義されていません