React + Redux - Reducer substateはオブジェクトではありませんか？

Question

私は以下のデータセットをJsonファイルに設定しました。

jsonファイルをajaxで取得すると、私は次の減速機を呼び出しました。

export default function clientProfile(state={}, action) { 

    switch(action.type) { 

     case GET_CLIENT_SUCCESS: 
      return action.payload; 

     default: 
      return state; 
    } 

} 

私は、しかし、私は未定義またはnullエラーを取得しておくよ逆に（使用）とthis.state.client.notesに.MAPしたいと思います。私は次の操作を実行したときに...

console.log(typeof this.state.client); //returns object 
console.log(typeof this.state.client.notes); //returns undefined 

を消し、私は私が正しい形式（たぶん）でJSONファイルを返すことを確認しましたが、ネストされた状態は、オブジェクトが、未定義ではない理由を私は理解していません。 これを修正するには.reverse（）と.map関数を使用するか、これは意図したとおりに動作していますか？それが意図している場合は、別の減速機を作成する以外の方法があります。ノートをクライアントの状態にしたい。

{ 
    "customerId": "34", 
    "agentId": "1", 
    "createdDate": "1510223892", 
    "firstname": "John", 
    "lastname": "Doe", 
    "mobile": "123456789", 
    "address": "Something email here", 
    "notes": { 
     "0": { 
      "noteId": "1", 
      "customerId": "34", 
      "createdBy": "1", 
      "created": "1510316194", 
      "note": "add something" 
     }, 
     "1": { 
      "noteId": "2", 
      "customerId": "34", 
      "createdBy": "1", 
      "created": "1510316527", 
      "note": "add something" 
     }, 
     "2": { 
      "noteId": "3", 
      "customerId": "34", 
      "createdBy": "1", 
      "created": "1510317177", 
      "note": "add new thing" 
     }, 
     "3": { 
      "noteId": "4", 
      "customerId": "34", 
      "createdBy": "1", 
      "created": "1510318448", 
      "note": "something" 
     }, 
     "4": { 
      "noteId": "5", 
      "customerId": "34", 
      "createdBy": "1", 
      "created": "1510318476", 
      "note": "this would be note number 5, lets see whether we can get something from this." 
     } 
    } 
} 

は考え出すいただきありがとうございます、と私はCONSOLE.LOG置けば、私はそれはオブジェクトとして返さ手に入れた）（レンダリングします。私も、このリンクにreferreので、私はこだわっている

map function for objects (instead of arrays)

ので、私は以下のコードのインサイダーは、レンダリングしている（）

//$.map(this.props.client.notes, function(note, key) { //This works, but i cannot use reverse() 

//Object.keys(this.props.client.notes).map(function(key, note) { //this doesn't work and return error 


Object.keys(this.props.client.notes).map(function(key, index) { 

return (
    <li key={key}> 

    <div>Key: {key} | Note_id: {this.props.client.notes[index].noteId} AND Note_content: {this.props.client.notes[index].note}</div> 
    </li> 

）。

ここではオブジェクトですが、上記のコードはまだ機能しません。 クライアントの状態のデータ型を調べることができたら、私は何をすべきかを知ることができます。

平均時間で、abovesは ×

TypeError: Cannot convert undefined or null to object

更新以下のエラーを返す：I更新私のコード以下の回答次の条件 とのコードを、printNoteの機能を（作成）と{this.printNoteを置きます}レンダリングの内部。

すべてのキーのコンソールログが表示されますが、画面には表示されません。さ

this.state.client.notes 

しかし、私の賭けは、あなたが（非同期であるwhic）フェッチ操作の前にそれにアクセスしようとしているということです。

printNote() { 
     console.log(this.props); 
     console.log(this.props.client.notes); 

     let notes = this.props.client.notes; 
     console.log('notes',notes); 
     if(notes) { 
      console.log('in if '); 
      Object.keys(notes).map(function(key, index) { 


        console.log(key); 
        return (
          <li key={key}> 
           <div>Key: {key} | Note_id: {notes[index].noteId} AND Note_content: {notes[index].note}</div> 
          </li> 


        ); 

       }) 

      } 
     } 

Answer 1

あなたがオブジェクトにアクセスしようとしているコードを投稿しませんでした完成したので、空のオブジェクトであるclientレデューサーの初期状態を取得します。 .mapはArray.prototypeとnotesに属しているため、これは動作しませんnotesに.mapを使用するように

はオブジェクトではない配列です。

アップデートのフォローアップとして。

これは、サーバーからデータを取得する前にrenderメソッドが実行される単純なケースです。
非同期にフェッチされるデータをレンダリングする場合は、条件付きで行う必要があります。例えば

：client.notesはtruthy値を返すかどう

const { client } = this.props; // just destructuring the object for shorter lines 
client.notes && Object.keys(client.notes).map(function(key, index) { 

     return (< li key = { 
      key 
      } > 

      <div> Key: { 
      key 
      } | Note_id: { 
      this.props.client.notes[index].noteId 
      } 
      AND Note_content: { 
      this.props.client.notes[index].note 
      } < /div> < /li> 

がマップラインのみが実行されますが（these are the falsy values）