React表格列表key属性警告：已设key仍报错的问题咨询

你在map循环里用了简写的空片段<>...</>包裹<tr>，React要求循环生成的列表直接子元素必须有唯一的key属性。当前你把key加在了内部的<tr>上，但循环返回的是这个空片段，React无法识别到<tr>上的key，因此依然会抛出警告。

有两种可行的修复方式：

方案一：移除不必要的空片段 #

如果你的<tr>不需要额外的包裹元素，直接返回<tr>即可，把key保留在<tr>上：

<table className="table table-responsive table-striped table-bordered">
    <thead className="text-center">
        <tr>
            <th>شرح خطا</th>
            <th>تاریخ / زمان</th>
            <th>عنوان خطا</th>
            <th>شناسه</th>
        </tr>
    </thead>
    <tbody>
        {
            logs && logs.map((_item, i) => {
                return <tr key={i}>
                    <td  className="text-end">{_item.exception}</td>
                    <td  className="text-center" >{new Date(_item.timeStamp).toLocaleDateString('fa-IR')} {new Date(_item.timeStamp).toLocaleTimeString('fa-IR')}</td>
                    <td  className="text-end">{_item.message}</td>
                    <td  className="text-end">{_item.id}</td>
                </tr>
            })
        }
    </tbody>
</table>

方案二：使用带key的完整Fragment语法 #

如果确实需要用Fragment包裹（比如要返回多个同级元素），不能用简写的<>, 必须使用完整的<React.Fragment>并给它设置key：

import React from 'react';

// ...

<table className="table table-responsive table-striped table-bordered">
    <thead className="text-center">
        <tr>
            <th>شرح خطا</th>
            <th>تاریخ / زمان</th>
            <th>عنوان خطا</th>
            <th>شناسه</th>
        </tr>
    </thead>
    <tbody>
        {
            logs && logs.map((_item, i) => {
                return <React.Fragment key={i}>
                    <tr>
                        <td  className="text-end">{_item.exception}</td>
                        <td  className="text-center" >{new Date(_item.timeStamp).toLocaleDateString('fa-IR')} {new Date(_item.timeStamp).toLocaleTimeString('fa-IR')}</td>
                        <td  className="text-end">{_item.message}</td>
                        <td  className="text-end">{_item.id}</td>
                    </tr>
                </React.Fragment>
            })
        }
    </tbody>
</table>

额外建议：尽量不要用数组索引i作为key，如果列表项有唯一标识（比如你的_item.id），用这个唯一值作为key会更可靠，避免列表项顺序变化时出现渲染异常，直接把key={_item.id}替换key={i}即可。

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