首页 > 解决方案 > 将数组转换为对象,以便 ID 始终保持不变 - React.js

问题描述

我有一个字符串数组作为我的数据。我想将该数组转换为一个对象,以便我可以呈现一个文本框列表。我想避免使用 map() 中的索引来填充键。我尝试改用 UUIDv4,但意识到每次我在其中一个文本框中写东西时,组件都会重新呈现,并且它会阻止用户在文本框中输入,因为组件重新呈现是因为组件上的键已更改,导致重新呈现。

有没有办法从 React 中的数组创建一个对象,这样当我在每个文本框中键入或删除或添加新文本框到数组和对象时,ID 保持不变?

UUID 不起作用的原因是每次页面重新呈现时 UUID 都会给我一个新密钥

我有一个数组

"[note 1, note 2]"

我想转换为一个对象,而不是每次都重新渲染 id

"[{id: 981, text: "note 1"}, {id: 452, text: "note 2" }]"

我目前遍历对象并显示文本框。我已经编写了添加新文本框和删除特定文本框的功能。

我的主要目标是在我在任何文本框中输入内容时阻止重新呈现。

感谢您花时间阅读我的问题!

标签: javascriptreactjs

解决方案


为了实现示例中的对象数组,您可以将 String 数组映射到 objects 数组。

let arr = ["note 1","note 2"];
let objArray = arr.map((arrEl, index) => {return {id: (Math.random()+index).toString(), text: arrEl}});
console.log(objArray);

推荐阅读