这是一个简单的例子，我使用了一个react条件&&先映射，在我已经添加了用户id键，以确保它是唯一的

 <tbody>
                                    {users &&
                                    users.map((user) => {
                                        return <tr key={user._id}>
                                            <td>{user.username}</td>
                                            <td><input
                                                name="isGoing"
                                                type="checkbox"
                                                checked={user.isEnabled}
                                                onChange={handleInputChangeNew}/></td>
                                            <td>{user.role.roleTitle} - {user.role.department.departmentName}</td>
                                            {/*<td className="text-right">
                                                    <Button>
                                                        ACTION
                                                    </Button>
                                                </td>*/}
                                        </tr>
                                    })
                                    }


                                    </tbody>

当你创建一个没有特殊key属性的元素列表时，React中会出现“列表中的每个子元素都应该有一个唯一的“key”道具”警告。必须为循环中的每个元素分配键，以便为React中的元素提供稳定的标识。

我们可以将对象的id属性设置为唯一键。

export default function App() {
      const posts = [
{ id: 1, title: "First "},
{ id: 2, title: "Second" },
{ id: 3, title: "Third" }
 ];
 return (
<div>
    <ul>
        {posts.map(value => 
            <li key={value.id}>{value.title}</li>
        )}
    </ul>
</div>
 );}


//simple way

//if u using ant design remove the empty fragment...

//worng ans---> change to following crt ans

export default function App() {
      const posts = [
{ id: 1, title: "First "},
{ id: 2, title: "Second" },
{ id: 3, title: "Third" }
 ];
 {fields.map((field,index)=>{
return(
  <> //empty fragment
   <Row key={index}>
    <Col span={6}>hello</Col>
   </Row>
  </>
)
})}

 //correct ans
//remove the empty fragments after solve this key.prop warning problem
export default function App() {
      const posts = [
{ id: 1, title: "First "},
{ id: 2, title: "Second" },
{ id: 3, title: "Third" }
 ];
 {fields.map((field,index)=>{
return(
  <> //empty fragment
   <Row key={index}>
    <Col span={6}>hello</Col>
   </Row>
  </>
)
})}

您的密钥应该是唯一的。就像一个唯一的id。你的代码应该是这样的

<div>
 {products.map(product => (
   <Product key={product.id}>
    </Product>
    ))}
  </div>

只需将唯一键添加到组件

data.map((marker)=>{
    return(
        <YourComponents 
            key={data.id}     // <----- unique key
        />
    );
})

一个直观的解释。

(数组的)key=index的错误方式

正如你所看到的，标签3、标签2和标签1都被重新渲染了(在元素面板中闪烁)。

正确的方法是key=uniqueId

只有顶部的新元素会闪烁(重新渲染)。

检查:key = undef !!

你也得到了警告信息:

Each child in a list should have a unique "key" prop.

如果你的代码是完全正确的，但是如果打开

<ObjectRow key={someValue} />

someValue未定义!!请先检查一下这个。你可以节省时间。