使用键属性作为唯一标识符

Question

我正在使用 React、Redux 和 Material-UI 进行开发。我正在显示一个表格，该表格是通过 Ajax 从服务器获取的数据生成的。

一般来说一切正常，除了从生成的表中选择一个 - 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, 作为默认状态。

我添加了一个onRowSelection={this.rowSelection.bind(this)}

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

选择一行后，key 有一个值，所以这也有效。 但是

作为密钥，我使用了用户 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>
    );

我能否以某种方式将 select 事件绑定到行，以提供 userID 作为参数，或者这是如何工作的？它似乎比它应该的更复杂，或者？

EDIT2：

或者是唯一的方法是访问生成表行的数据并将数组索引与行索引进行比较？

Answer 1

从你提供的代码中我可以看出你有

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

但是您的rowSelection 签名需要key 作为第一个参数，并且您没有传递它，所以函数内的key 是undefined。

你必须把它改成

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