キープロパティをユニークな識別子として使用する

Question

私はReact、Reduxを使用しています&開発用マテリアルUI。私はAjax経由でサーバーからフェッチされたデータから生成されたテーブルを表示しています。

一般的には、生成されたテーブルから1つを選択した後にユーザーを特定する方法がわかりませんが、すべてが機能しています。以下で

全体のコードは私にヘルプを提供するために必要とされていないので - 私がここでやって、私はちょうどので、（ - 私の間違ったなら、私を修正）、

{allUser != null ? allUser.map((row, index) => (
         <TableRow className="testx" key={row.userID} selected={row.selected}> 
          <TableRowColumn> 
           {/* 
           <UserCard 
           userData={row} 
           displayPersonalInfo={true} 
           showRequestDates={false} 
           showChangePassword={false} 
           /> 

           */} 
           {row.userID} 
          </TableRowColumn> 
         </TableRow> 
        )) 
         : <TableRow><TableRowColumn>{"Keine Einträge vorhanden"}</TableRowColumn></TableRow> 
        } 

を小さなコードの行を表示しますかなりシンプルです。私はちょうどUserCardを含むテーブルを生成しました。 multiSelectable: true,をデフォルト状態として有効にしました。

Iが行を選択した後onRowSelection={this.rowSelection.bind(this)}

rowSelection(key){ 
    console.log("select") 
    console.log(key) 
} 

が含まれている、keyので、これも動作している値を有します。 BUT

私はユーザーID key={row.userID}を使用しましたが、ここでは何の影響もないようです。選択したユーザーを特定するためのキープロパティが間違っている場合は、正しい方法は何でしょうか？

私のユーザーIDがキーとして使用されないのはなぜですか？どのようにしてユーザーの選択したユーザーを表で識別できますか？

誰でも私をここで助けることができます！

編集：ここでは

が正しい答えを得るために必要としているように見える私のrender()コード、です。

return (
     <div id="requestSummaryTable"> 
      <Table 
       height={this.state.height} 
       fixedHeader={this.state.fixedHeader} 
       fixedFooter={this.state.fixedFooter} 
       selectable={this.state.selectable} 
       multiSelectable={this.state.multiSelectable} 
       onRowSelection={this.rowSelection.bind(this)} 
      > 
       <TableHeader 
        displaySelectAll={this.state.showCheckboxes} 
        adjustForCheckbox={this.state.showCheckboxes} 
        enableSelectAll={this.state.enableSelectAll} 
       > 
        {/* 
        <TableRow> 
        <TableHeaderColumn colSpan="3" tooltip="Urlaubsanträge" style={{textAlign: 'center'}}> 
        Übersicht Urlaubsanträge 
        </TableHeaderColumn> 
        </TableRow> 
        */} 

        <TableRow> 
         <TableHeaderColumn tooltip="Name">Nutzer</TableHeaderColumn> 
        </TableRow> 
       </TableHeader> 
       <TableBody 
        displayRowCheckbox={this.state.showCheckboxes} 
        deselectOnClickaway={this.state.deselectOnClickaway} 
        showRowHover={this.state.showRowHover} 
        stripedRows={this.state.stripedRows} 
       > 

        {allUser != null ? allUser.map((row, index) => (
         <TableRow className="testx" key={row.userID} value={row.userID} selected={row.selected}> 
          <TableRowColumn> 
           {/* 
           <UserCard 
           userData={row} 
           displayPersonalInfo={true} 
           showRequestDates={false} 
           showChangePassword={false} 
           /> 

           */} 
           {row.userID} 
          </TableRowColumn> 
         </TableRow> 
        )) 
         : <TableRow><TableRowColumn>{"Keine Einträge vorhanden"}</TableRowColumn></TableRow> 
        } 
       </TableBody> 
      </Table> 
     </div> 
    ); 

は私が何とかパラメータとして、またはどのようにこの作業があるユーザーIDを提供するために、行にselectイベントをバインドすることができますか？それはもっと複雑に思えるでしょうか？

EDIT2：

またはテーブルの行を生成しているデータにアクセスし、行インデックスと配列のインデックスを比較するために、これを行うための唯一の方法は？

Answer 1

あなたは私はあなたが

onRowSelection={this.rowSelection.bind(this)}

を持っていることがわかりますが、あなたのrowSelection署名が最初のパラメータとしてkeyを期待し、あなたがそれを渡していないので、関数内keyが提供しているコードからundefined。

あなたは

onRowSelection={this.rowSelection.bind(this, row.userID)}