访问反应子对象键和值对答案

【问题标题】：Access a react child object key and value pair访问反应子对象键和值对
【发布时间】：2016-11-22 06:52:50
【问题描述】：

我有以下代码从使用 props 的父组件传入的对象中返回带有键和值对的列表元素。为什么它不起作用？

我收到一条错误消息：TypeError: Cannot read property 'props' of undefined(...) 该错误是因为我的 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>
    );
  }
}

这里是父组件传入的数据：

[{
  "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
  }
}];

【问题讨论】：

不是你问的，但你不应该使用数组索引作为键，特别是如果数组可能被重新排序，或者添加或删除项目。如果category 是唯一的，则可以将其用作键。

标签： javascript reactjs

【解决方案1】：

map 函数中的

this 指的是函数而不是 react 组件的实例，因此您需要明确传递 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>
}

【讨论】：

正确，除了this 不会引用任何类，而是引用类的实例。我更喜欢更广泛的术语“反应组件的实例”，因为并非所有反应组件都是类。（当我打算从我的手机中添加此评论时，我不小心提议对您的答案进行编辑，对不起:-( )

【解决方案2】：

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

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

【讨论】：