React + Redux - Reducer子狀態不是一個對象？

Question

我有下面的數據集Json文件。

在ajax檢索json文件時，我調用了下面的reducer。

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

    switch(action.type) { 

     case GET_CLIENT_SUCCESS: 
      return action.payload; 

     default: 
      return state; 
    } 

} 

我想用反向（）和.MAP上this.state.client.notes但我不斷收到未定義或爲空的錯誤。轉出時，我這樣做...

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

更新：與條件 按照下面我更新了我的代碼，創建printNote（函數的答案），並把{this.printNote代碼}裏面渲染。

我可以看到所有按鍵的控制檯日誌，但是，它沒有在屏幕上呈現。

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

你沒有張貼在您試圖訪問該對象的代碼：

this.state.client.notes 

但我敢打賭，你想提取操作（whic是異步）之前訪問它完成，因此您將獲得client減速器的初始狀態，該減速器是空的物體。

作爲使用.map上notes這將不會工作，因爲.map屬於Array.prototype和notes是一個對象不是一個數組。

編輯
作爲您的更新的後續。

這是一個簡單的例子，其中render方法在從服務器獲取任何數據之前運行。
當您想渲染提取的異步數據時，應該有條件地執行此操作。

例如：

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> 

如果client.notes會返回一個值truthy的地圖線將只執行（these are the falsy values）