関数を呼び出してマップ関数からパラメータを渡す方法

Question

インデックスを渡しながら関数を呼び出そうとしていますが、ラムダをonclickハンドラに渡すのはベストプラクティスではありません。これを処理するより良い方法はありますか？今は毎回作成される関数ではないからですか？

ラムダの削除トランジション中に状態を更新するリスクがあります。トランジション中に関数が無限に呼び出される可能性があります。

class MyComponent extends React.Component { 
     constructor(props, context) { 
      super(props, context); 

      this.myFunc= this.myFunc.bind(this); 
     } 

      myFunc(index){ 
       //do stuff with the index 
      } 

      render(){ 
       const items = this.props.list.map((listItem, index) => 
        return <div key={listItem.id} onClick={() => this.myFunc(index)}>{listItem.name}</div> 
       ); 

       return(
        <div>{items}</div> 
       ) 
      } 
     } 

Answer 1

それを行うための最善の方法は、新しいコンポーネントにリスト項目を抽出することである。

class ListItem extends React.PureComponent{ 
    const myFunc =() => { 
     const { index } = this.props 
     // do something with index 
    } 

    render(){ 
     const { listItem } = this.props 
     return (
      <div key={listItem.id} onClick={this.myFunc}>{listItem.name}</div> 
    ) 
    } 
} 

Answer 2

It is recommended in the React Docs to use bind to pass additional params：

myFunc(index, e){ 
    // Do something with index... 
} 
render() { 
    const items = this.props.list.map((listItem, index) => 
     return <div key={listItem.id} onClick={this.myFunc.bind(this, index)}>{listItem.name}</div> 
    ); 
    return ... 
}