访问一个反应的子对象键和值对

我有以下代码返回一个列表元素与父组件使用道具传入的对象中的键和值对。为什么它不起作用？访问一个反应的子对象键和值对

我得到一个错误：TypeError：无法读取未定义（...）的属性'道具'错误是因为我的return语句中的this.props.data调用。不通过道具传递数据不是问题。我查看了反应输出树，并且我的数据对象确实传入了子节点。

class Parent extends React.Component { 
    render(){ 
    return (
     <div> 
      {this.props.transactions.map(function(el,i) { 
      return <div key={i}> 
       <div> 
        {el.category} 
       </div> 
       <Child data={el.months}/> 
      </div>; 
      })} 
     </div> 
    ); 
    } 
} 
class Child extends React.Component { 
    render(){ 
    return (
     <ul> 
     {Object.keys(this.props.data).map(function(key,index) { 
      return <li key={index}>{this.props.data[key]}</li> 
     })}; 
     </ul> 
    ); 
    } 
}

这里是由父组件传递的数据：map函数内部

[{ 
    "category": "Bills", 
    "month": { 
    "feb": 9, 
    "mar": 169, 
    "apr": 10, 
    "may": 867, 
    "jun": 394, 
    "jul": 787, 
    "aug": 1112, 
    "sep": 232, 
    "oct": 222, 
    "nov": 306, 
    "dec": 1096 
    } 
}];

来源

2016-11-22 mo_maat

不是你所要求的，但你不应该使用数组索引作为键，尤其是如果数组可能会被重新排序或添加或删除数组。如果'category'是唯一的，您可以将其用作关键字。 – ArneHugo

this是指功能 NOT的反应组件的实例，所以你需要通过this明确如下：

（1）在飞行中：

{ 
    Object.keys(this.props.data).map(function(key,index) { 
    return <li key={index}>{this.props.data[index]}</li> 
    }, this) 
};

（2）在一个单独的方法：

{ 
    Object.keys(this.props.data).map(this.listItems.bind(this)) 
};

，并添加listItems方法类：

listItems(key, index) { 
    return <li key={index}>{this.props.data[index]}</li> 
}

来源

2016-11-22 06:57:37

正确，除了'this'不会引用任何类，而是引用一个类的实例。我更喜欢广义的“反应组件实例”，因为并不是所有的反应组件都是类。（我意外地在你的答案中提出了一个编辑，意思是从我的手机中添加此评论，对不起:-(） – ArneHugo

@ArneHugo谢谢，已经编辑过它。 –

@Basim已经给正确答案。如果你使用ES6，你也可以这样做。

{Object.keys(this.props.data).map((key,index)=> { 
     return <li key={index}>{this.props.data[key]}</li> 
    })};

来源

2016-11-22 06:59:35 Ved

访问一个反应的子对象键和值对

回答

相关问题