ES6/React 2番目のアイテムのバインドが失敗します

Question

ここにはいくつかのコンポーネントがあります。親コンポーネント（Dropdown）には2つのサブコンポーネントがあり、それぞれDropClick内で発生するクリックイベントがあります。私は、最初のクリックイベント（handleClick）との問題はないが、結合は、第2のクリックイベントのために失敗しているようだ（handleItemClick）

エラー：

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

親コンポーネント（ドロップダウン）：

export class Dropdown extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { open: false }; 

    this.handleClick = this.handleClick.bind(this); 
    this.handleItemClick = this.handleItemClick.bind(this); 
    } 
    handleClick() { 
    this.setState({ open: !this.state.open }); 
    } 
    handleItemClick() { 
    console.log("anything"); 
    } 
    render() { 
    let list = this.props.items.map(function(item) { 
     return <ListItem item={item} key={item} whenItemClicked={this.handleItemClick}/> 
    }); 
    return (
     <div className="dropdown"> 
     <Button 
      className="btn-default" 
      title={this.props.title} 
      subTitleClassName="caret" 
      whenClicked={this.handleClick} /> 
     <ul className={"dropdown-menu " + (this.state.open ? "show" : "")}> 
      {list} 
     </ul> 
     </div> 
    ); 
    } 
} 

子コンポーネント（ListItem）では、このアイテムの対応するクリックイベントはバインドに失敗したイベントです。

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

2番目の子コンポーネントは、この項目の対応するクリックイベントは、これはおそらく私が見渡せるてることは明らかなものである

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> 
    ); 
    } 
} 

に動作します。どんな助けでも大歓迎です！

Answer 1

mapは、配列である関数呼び出し側にthisをバインドします。 this内部mapはfunction() {}と書かれていますが、配列はコンポーネントではありません。

矢印関数を代わりに使用してください。これは、字句のあるthisを取り囲んでおり、あなたのコンポーネントである周囲のthisを保持します。

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