Reduxのオブジェクト配列データのマッピング

Question

私はオブジェクトの配列であるresponse.dataを返すapiリクエストにaxiosとreduxを使用しています。次のように

私の行動の減速は、次のとおりです。

export default function(state = [], action) { 
    switch (action.type) { 
    case FETCH_USERS: 
     console.log(action.payload.data) 
     return { ...state, users: action.payload.data }; 
     } 
    return state; 
} 

にconsole.logは

[object, object] 

私の問題は、私は、オブジェクトのデータをマッピングすることができますどのように発生するクロムコンソールでこれを返します。私は配列をマップしたところで次のことを試しました。 （ユーザーがオブジェクト配列の小道具である。）

.... 
{this.props.users.map(this.renderUser)} 
... 

renderUser(user) { 
    return (
    <tr> 
     <td> {user.contact_name}</td> 
     <td> {user.contact_email}</td> 
    </tr> 
); 
} 

私は私の小道具をチェックするように反応するコンソールを使用する場合、私は、次を得る：

users: {...} 
    users: 
     0:{...} 
     1:{...} 

私は、オブジェクトをマッピングするかどうかはわかりませんhtmlへそれを文字列に変換してマップした方が良いでしょうか？私のマッピングは空白に見えます。

Answer 1

あなたの状態はあなたの配列と同じ名前であり、それはあなたを混乱させることです。

ユーザーの減速が何を得たことは

this.props.users = initialState 

ので、ユーザーにアクセスするためにあなたが使用する必要がある

const initialState = { 
    .... 
    users : [] 
} 

あなたが名前を使用して、あなたの小道具にマッピング「ユーザー」であります

this.props.users.users 

つまり、ユーザーにアクセスする方法は次のとおりです。 storeで

.... 
{this.props.users.users.map(this.renderUser)} 
... 

renderUser(user) { 
    return (
    <tr> 
     <td> {user.contact_name}</td> 
     <td> {user.contact_email}</td> 
    </tr> 
); 
} 

Answer 2

あなたusersがネストされたオブジェクトである場合、あなたはmapStateToPropsでこの問題を解決することができます。
それはあなたが望むどのデータ/ Reduxのに反応告げるだけでなく、/マップを変換する方法
は、あなたはそれが上の表示したいどのようにそれはReduxのstoreに格納されている方法からのデータを、
を言いましたprops：今

mapStateToProps(store){ 
    return { 
    users: store.users.users, 
    } 
} 

、あなたのコンポーネント内で、あなたはむしろthis.props.users.usersよりも、this.props.usersとしてあなたusers（配列）にアクセスし、オーバーマッピングすることができます。あなたが見て可能性が

---

もう一つは、データがAPIから引き出され、Reduxのstoreに格納されている方法です。
APIがネストされたデータを提供している場合（私が使っていたAPIのの1つのルート、これは奇妙なことです）。

その場合は..これに

return { ...state, users: action.payload.data }; 

：

return { ...state, users: action.payload.data.users }; 

完全な機能は次のようになります。

export default function(state = [], action) { 
    switch (action.type) { 
    case FETCH_USERS: 
     console.log(action.payload.data) 
     return { ...state, users: action.payload.data.users }; 
     } 
    return state; 
} 

を、予期された形式であなたの小道具/状態/ストアオブジェクトを持って、この行を変更するために