Javascript 与钥匙和子部件反应中的钥匙支柱警告

据我所知，我正确地在正确的组件上使用了

键

，但尽管我付出了努力，错误仍然存在

我有一个

通知

组件，它通过array.map（）呈现单个

通知

组件的列表。通常，当通知的文本是字符串时，这很好，但当它是JSX（如带有链接的

p

）时，我会不断收到“子元素必须具有唯一键”警告。在这种情况下，只有一个通知，因此密钥是唯一的

这是在Redux中设置通知的代码：

props.setNotification({
  type: 'error',
  domain: 'page/section',
  text: (
    <p>
      An error occurred.{' '}
      <a href="/somewhere/else">Learn more</a>
    </p>
  )
})

到目前为止，我已经尝试：

• 向在

  setNotification

  中创建的段落添加一个键，但它没有做任何事情，尽管警告首先指向该元素
• 使用不同的元素而不是

  p

  ，比如

  React.Fragment

  ，但这并没有改变什么，即使这些元素本身有静态键
• 将

  key

  传递到通知组件中，但这会导致另一个错误，因为您无法在子级中传递/访问

  key

• 将

  通知中分配的密钥更改为比
  {i}
  更稳定的密钥。我尝试了
  {btoa（note.text）}
  和其他一些变体，但没有任何效果。如果
  文本
  只是一个字符串，它就可以工作，甚至直接使用单个
  通知
  时也可以工作（手动给它一个
  注释
  对象，而不是使用
  通知
  ，即使JSX作为
  文本
  ），我不理解为什么这个特定案例会引发错误

---

这里有什么明显的我遗漏的吗。为什么当

text

是一个纯字符串，而不是JSX时，这个警告会起作用。

我通过使用

Math.random（）为键分配一个随机值来解决这个问题。

您可以这样尝试：

<Notification key={Math.random()} />

---

我通过使用

Math.random（）

您可以这样尝试：

<Notification key={Math.random()} />

---

如果为

通知添加碎片，并提供适当的React元素，则其将按预期工作


const notificationList=[
{
键入：“错误”，
域：“页/节”，
正文：(

发生了一个错误。

)
}
];
常量通知=（{通知，类型，域}）=>(
{通知
.过滤器(
注=>
（！type&！domain）||
（域&¬e.domain===域）||
（type&¬e.type===type）
)
.map（（注，i）=>(
))}
);
const Text=props=>{props.children}；
常量通知=（{className，note}）=>{note.text}；
常量应用=（）=>{
返回(
你好，代码沙盒
);
}
如果为
通知添加碎片，并提供适当的React元素，则其将按预期工作


const notificationList=[
{
键入：“错误”，
域：“页/节”，
正文：(

发生了一个错误。

)
}
];
常量通知=（{通知，类型，域}）=>(
{通知
.过滤器(
注=>
（！type&！domain）||
（域&¬e.domain===域）||
（type&¬e.type===type）
)
.map（（注，i）=>(
))}
);
const Text=props=>{props.children}；
常量通知=（{className，note}）=>{note.text}；
常量应用=（）=>{
返回(
你好，代码沙盒
);
}
您正在以相同的名称使用常量和元素
通知
？您正在以相同的名称使用常量和元素
通知
？感谢您的回答并提供代码片段。不幸的是，这对我仍然不起作用。第一个问题是，
触发无效令牌警告，无法正确编译。即使在使用React.Fragments时，它仍然抛出错误。我试着让通知只返回note.text，甚至返回包装在片段中的note.text，但仍然会抛出错误，尽管错误堆栈略有不同。这让这个问题变得更加复杂。你是否能够在某个地方复制这个问题以进行检查，比如codesandbox？谢谢你的回答并提供了代码片段。不幸的是，这对我仍然不起作用。第一个问题是，
触发无效令牌警告，无法正确编译。即使在使用React.Fragments时，它仍然抛出错误。我试着让通知只返回note.text，甚至返回包装在片段中的note.text，但仍然会抛出错误，尽管错误堆栈略有不同。这让这个问题变得更加复杂。你能在某个地方复制这个问题，像codesandbox一样进行检查吗？这是我尝试过的事情之一，它不会改变它。这实际上是一种反模式，因为密钥不够静态，因此React无法正确验证组件是否需要重新呈现，因此只是为了安全起见才这样做，从而导致性能损失。@coblr检查：这是我尝试过的事情之一，它不会改变它。这实际上是一种反模式，因为密钥不够静态，因此React无法正确验证组件是否需要重新呈现，因此只是为了安全起见才这样做，从而导致性能损失。@coblr检查此项：
index.js:2178 Warning: Each child in a list should have a unique "key" prop. See docs for more information.
    in p
    in div (created by Text)
    in Text (created by Notifications)
    in div (created by Notification)
    in Notification (created by Notifications)
    in Notifications (at Notifications/index.js:15)
    in Notifications (created by Connect(Notifications))

<Notification key={Math.random()} />