React在列表组件上发出的key警告，来自父组件。

12 浏览
0 Comments

React在列表组件上发出的key警告，来自父组件。

警告：列表中的每个子项应该有一个唯一的“key”属性。请检查ForwardRef(ListItem)的渲染方法。它接收了来自RecipientsList的一个子项。

我已经通过react-components调试工具在Chrome上追踪到了这个问题。我已经在组件上添加了key属性，但警告仍然出现。

父组件（Recipient List）


{recipientsResults.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((recipient, index) => (


,

 {
if (index === selectedIndex) {
setSelectedIndex(null)
} else (
handleBeneficiaryClick(index)
)
}} />

]}
collapsibleContent={
 handleDelete(id)}
onEdit={(id) => handleEdit(id)}
/>
}
/>
))}

子组件（Custom List）

return (
<>

{avatar &&


{getInitials(title)}


}


{collapsibleContent && collapsibleContent}

)

0

3 答案

0 Comments

React中的key是用于唯一标识组件元素的属性。在渲染组件列表时，如果没有为每个元素提供唯一的key，React会给出一个警告。在某个父组件中出现的React key警告，可能是由于在子组件列表中使用了不恰当的key而引起的。

在给子组件列表生成key时，有些开发者使用了Math.random()函数来生成随机数作为key值。然而，这种做法是不推荐的。因为Math.random()函数生成的随机数在每次调用时都会产生一个不同的值，这样会导致在子组件列表中出现动态变化的key，进而导致React重新渲染整个列表。这不仅会影响性能，还可能导致一些意外的问题。

为了解决这个问题，可以使用子组件在map函数中的索引作为key值。因为在同一个列表中，索引是唯一的，并且在渲染过程中不会发生变化。所以可以放心地将索引作为key值来使用。

以下是一个示例代码，演示如何使用索引作为key值：

const ParentComponent = () => {
  const items = ["item1", "item2", "item3"];
  return (
    

      {items.map((item, index) => (
        
      ))}
    

  );
};
const ChildComponent = ({ item }) => {
  return 
{item}
;
};

在上述示例中，ParentComponent组件使用map函数渲染了一个子组件列表。在传递给ChildComponent组件的key属性中，我们使用了map函数提供的索引值index作为key值。

通过使用索引作为key值，可以避免React key警告的出现，并且确保在渲染过程中每个子组件都具有唯一的标识。这样能够提高React应用的性能和稳定性。

0
0 Comments

React中的key属性用于标识列表中的每个元素，在进行列表操作时，React使用key来准确地追踪每个元素的变化。如果没有为列表中的元素指定key属性，React会发出警告，警告提示可能会导致性能下降和不正确的UI更新。

在某个自定义列表组件中，出现了React key警告。根据错误信息，我们可以推断出问题是由父组件引起的。为了解决这个问题，我们需要更改自定义列表组件中的代码。

原来的代码如下所示：

<>

我们需要将其更改为：

通过查阅资料，我们找到了解决方案的来源，为了避免React key警告，我们需要在自定义列表组件中使用React.Fragment，并为每个元素指定一个唯一的key属性。

更多信息可以参考：https://stackoverflow.com/a/68014086/4831770

0
0 Comments

React中的key警告是因为在列表组件中出现的，而这个问题是由父组件引起的。

问题的原因是在父组件中使用了一个随机的key值，而React需要通过key来“关联”数组中的每个项。这意味着如果使用一个随机的key，那么在每次渲染时，React会认为JSX是从一个不同的项派生出来的。

解决方法是将随机的key替换为一些确定的值，比如使用索引或者使用列表项的唯一标识符。这样React就可以正确地关联每个项了。

以下是解决方法的代码示例：

{someArray.map((item, index) => (
  
))}

或者使用列表项的唯一标识符：

{someArray.map(item => (
  
))}

通过使用确定的key值，React就能够正确地追踪和更新列表项了，同时也消除了key警告。

0