访问反应子对象键和值对

Question

我有以下代码从父组件使用 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
  }
}];

Answer 1

thismap函数内部是指函数而不是反应组件的实例，因此您需要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>
}