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）