Question

我有以下代码返回一个list元素，其中包含来自父组件使用props传入的对象的键和值对。为什么它不起作用？

我收到一条错误消息：TypeError：无法读取属性＆＃39;道具＆＃39; of undefined（...）错误是因为我的return语句中的this.props.data调用。没有通过道具传递数据不是问题。我查看了react输出树，我的数据对象确实被传递给了孩子。

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

this函数中的

map指的是函数而不是反应组件的实例，所以你需要通过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>
}

Answer 2

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

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

访问react子对象键和值对

2 个答案: