已在循环中设置key仍报Missing 'key' prop错误，原因是什么？

我已经给每个<td>和<tr>都加了唯一的key，但还是收到「Missing "key" prop for element in iterator」错误。

以下是我的组件完整代码：

export default function TableComponent( data: any ) {
    const columnNames = Object.keys(data.data);
    const rowIndices = Object.keys(data.data[columnNames[0]])
        
        type rowProps = {
            idx: number;
        }
        const CustomRow = ({ idx }: rowProps) => {
            return (
                <tr key={idx}>
                    {columnNames.map((columnName, index) => (
                        <td key={`${index}+${idx}`}> {data.data[columnName][idx]} </td>
                    ))}
                </tr>
            )
        }
        
        return (        
            <table className="table table-striped">
                <tbody>
                    {rowIndices.map((row,index) => (
                        <CustomRow 
                            idx={row}
                        />
                    ))}
            </tbody>
            </table>
        );
    };

错误提示为：Missing "key" prop for element in iterator，且错误出自这段代码：

<tbody>
    {rowIndices.map((row,index) => (
        <CustomRow 
            idx={row}
        />
    ))}

解决方法 #

问题出在你遍历rowIndices渲染CustomRow时，没给CustomRow组件本身加key属性。

虽然你在CustomRow内部给<tr>加了key，但React要求key必须绑定在迭代生成的顶层元素/组件上——也就是map返回的最外层节点，这里就是CustomRow。

修改后的代码片段：

<tbody>
    {rowIndices.map((row,index) => (
        <CustomRow 
            key={row} // 在这里添加key，优先用row作为唯一标识，比index更稳定
            idx={row}
        />
    ))}
</tbody>

补充说明：

• 不要把key放在组件内部的子元素上，必须直接加在迭代产生的顶层节点上
• 优先用数据自身的唯一标识（比如这里的row）作为key，尽量避免用index——如果数据顺序发生变化，index会跟着改变，可能引发不必要的组件重渲染，影响性能

内容的提问来源于stack exchange，提问作者Nathan