React 表 7 给出了唯一键的问题

Question

我正在使用 React Table 7 来构建我的表格，并且表格呈现但我收到警告列表中的每个孩子都应该有一个唯一的“关键”道具。我已在所有地图功能和行中包含键，但仍然收到警告。

列表中的每个孩子都应该有一个唯一的“关键”道具。

表格代码从这里开始。

return(
                <div className="mf-appointments-table">
                    <div className="horizontalScrollBar">
                        <table {...getTableProps()} className="rt-table">
                            <thead className="rt-thead -header">
                                {headerGroups.map((headerGroup, index) => (
                                    <tr
                                        key={index}
                                        className="rt-tr"
                                        {...headerGroup.getHeaderGroupProps()}
                                    >
                                        {headerGroup.headers.map((column, i) => (
                                            <th
                                                key={i}
                                                {...column.getHeaderProps({
                                                    style: {
                                                        minWidth: column.minWidth,
                                                        width: column.width,
                                                    },
                                                    className:
                                                        column.parent !== undefined
                                                            ? `rt-th -header ${column.headerClassName}`
                                                            : column.id === 'select'
                                                            ? column.headerClassName
                                                            : `-headerGroups ${column.headerClassName}`,
                                                })}
                                                {...column.getHeaderProps()}
                                            >
                                                {column.render('Header')}
                                                {column.headerClassName &&
                                                column.headerClassName !== 'undefined' &&
                                                column.headerClassName.includes('borderBottom') &&
                                                column.className !== 'expander-cell' ? (
                                                    <span
                                                        {...column.getResizerProps()}
                                                        className={`resizer ${
                                                            column.isResizing ? 'isResizing' : null
                                                        }`}
                                                    >
                                                        {' '}
                                                        .
                                                    </span>
                                                ) : null}
                                            </th>
                                        ))}
                                    </tr>
                                ))}
                            </thead>
                            <tbody className="rt-tbody" {...getTableBodyProps()}>
                                {rows.length > 0 &&
                                    rows.map((row, index) => {
                                        prepareRow(row);
                                        return (
                                            <>
                                                <tr
                                                    key={index}
                                                    id={index}
                                                    className="rt-tr"
                                                    {...row.getRowProps()}
                                                >
                                                    {row.cells.map((cell, i) => {
                                                        return (
                                                            <td
                                                                key={i}
                                                                onClick={() => getTdProps(cell)}
                                                                {...cell.getCellProps({
                                                                    className: `rt-td 
                                                       ${cell.column.className}`,
                                                                })}
                                                                {...cell.getCellProps()}
                                                            >
                                                                {cell.render('Cell')}
                                                            </td>
                                                        );
                                                    })}
                                                </tr>
    
                                                {row.isExpanded && (
                                                    <tr
                                                        key={index}
                                                        id={index}
                                                        className="rt-tr expandedSubRow"
                                                        {...row.getRowProps()}
                                                    >
                                                        {row.cells.map((cell, i) => {
                                                            return (
                                                                <td
                                                                    key={i}
                                                                    className="rt-td"
                                                                    {...cell.getCellProps()}
                                                                >
                                                                    {SubComponent({
                                                                        row,
    
                                                                        cell,
                                                                    })}
                                                                </td>
                                                            );
                                                        })}
                                                    </tr>
                                                )}
                                            </>
                                        );
                                    })}
                            </tbody>
                        </table>
    
                        <div className="loader">
                            <ClipLoader color="grey" loading={loading} size={150} />
                        </div>
    
                        {rows.length === 0 && !loading ? (
                            <div className="empty-table">{tableText}</div>
                        ) : null}
                    </div>
    
                    {totalPages > 1 ? reactTablePagination() : null}
                </div>
    )

Answer 1

即使在每个项目上都添加了 key 属性，但在上面的代码中它们并不是唯一的。索引已分配给键，但该索引在循环内的许多情况下可能是重复的。

Key 属性在渲染时起着非常重要的作用。错误使用关键属性可能会导致性能问题。

key的正确使用应遵循以下条件，

唯一 - 键不能与同级组件的键相同。 静态 - 一个键不应该在渲染之间改变。

在上面的代码中，key 不会是唯一的，因为同一个索引值在多个地方循环。

使用key属性的最佳方式，

<tbody>
    {rows.map((row) => {
        return <tr key={row.uniqueId} />;
    })}
</tbody>

为每一行拥有一个唯一的 id 并分配给元素。

对于reference