Javascript ES6/React第二项绑定失败

我这里有一些组件。父组件（下拉列表）有两个子组件，每个子组件都有一个在下拉列表中触发的单击事件。我对第一次单击事件（handleClick）没有问题，但是第二次单击事件（handleItemClick）的绑定似乎失败了

错误：

Dropdown.js:57 Uncaught TypeError: Cannot read property 'handleItemClick' of undefined

父组件（下拉列表）：

导出类下拉列表扩展组件{
建造师（道具）{
超级（道具）；
this.state={open:false}；
this.handleClick=this.handleClick.bind（this）；
this.handleItemClick=this.handleItemClick.bind（this）；
}
handleClick（）{
this.setState（{open:！this.state.open}）；
}
handleItemClick（）{
控制台日志（“任何”）；
}
render（）{
let list=this.props.items.map（函数（项）{
返回
});
返回(

{list}

);
}
}

子组件（ListItem），此项对应的单击事件是绑定失败的事件

export class ListItem extends Component {
  render() {
    return (
      <li><a onClick={this.props.whenItemClicked}>{this.props.item}</a></li>
    );
  }
}

导出类ListItem扩展组件{
render（）{
返回(
{this.props.item}
);
}
}

第二个子组件，此项对应的单击事件工作

export class Button extends Component {
  render() {
    return (
      <button onClick={this.props.whenClicked} className={"btn " + this.props.className} type="button">
        {this.props.title} <span className={this.props.subTitleClassName}>{this.props.subTitle}</span>
      </button>
    );
  }
}

导出类按钮扩展组件{
render（）{
返回(
{this.props.title}{this.props.subTitle}
);
}
}

---

这可能是我忽略的一些显而易见的事情。任何帮助都将不胜感激

map

将

此

绑定到函数调用方，即数组

这个
内部
映射
是用
function（）{}
编写的数组，而不是组件

let list = this.props.items.map(item => { 
  return <ListItem whenItemClicked={this.handleItemClick}/>
});

改为使用箭头函数，它将保留“词法”this
，周围的
this
，这是您的组件

let list = this.props.items.map(item => { 
  return <ListItem whenItemClicked={this.handleItemClick}/>
});

let list=this.props.items.map（item=>{
返回
});