고유 한 키 특성 사용 식별자

Question

저는 React, Redux를 사용하고 있습니다. & Material-UI for development. Ajax를 통해 서버에서 가져온 데이터에서 생성 된 테이블을 표시하고 있습니다.

일반적으로 생성 된 테이블에서 1 - n을 선택한 후 사용자를 식별하는 방법을 모르겠다는 점을 제외하면 모든 것이 작동합니다. 다음에서

나는 전체 코드 나에게 도움을 제공하지 않아도되기 때문에

{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도 작동이되도록하는 값을 갖는다. 하지만 나는 아이디 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> 
    ); 

어떻게 든 select 이벤트를 행에 바인딩하여 매개 변수로 userID를 제공하거나 어떻게 작동합니까? 그것이해야 할 것보다 더 복잡해 보이는가?

EDIT2 :

또는 테이블 행을 생성하는 데이터에 액세스 및 행 인덱스 배열의 인덱스를 비교하기 위해,이 작업을 수행 할 수있는 유일한 방법은? 당신은 내가 당신이 가지고있는 것을 볼 수 있습니다 제공이 코드에서

Answer 1

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

하지만 rowSelection 서명은 첫 번째 매개 변수로 key 기대하고 함수 내에서 그렇게 key 그것을 통과하지 않는 것입니다 undefined.

당신은 대답

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