时间戳

首页 > 解决方案 > 重新渲染时反应动态键

reactjs - 重新渲染时反应动态键

问题描述

我有一个对象数组，我映射数组并为每个对象返回一个组件。

现在，由于各种原因，我不能使用 ID 或索引作为唯一键，所以我使用的是短 id 库，问题是每次发生任何变化并重新渲染数组时，所有组件都会获得新的 ID 和由于 Id 改变，它失去了焦点

 {properties.map(property => (
            <PropertyForm key={shortid.generate()}/>
 ))}

这是我的代码，每次特定属性更改时都会重新渲染并因此重新生成其密钥。

Anu 提示将不胜感激，谢谢

标签： reactjs

解决方案

在渲染之前，您必须为每个对象生成一个唯一的 id 以避免它。更准确地说，当将单个对象添加到数组中时，它必须生成该新对象的唯一 ID。

如果数组初始化后不改变对象的大小或顺序，可以使用map函数的key参数。

 {properties.map((property, key) => (
            <PropertyForm key={key}/>
 ))}

但是当它是可变的时它是不安全的，我鼓励你遵循前者的方式。

推荐阅读