Javascript 向数组中添加唯一元素

我的任务是在数组中添加一个唯一的数字

const [items, setItems] = useState(new Set());

const addNumber = () => {
  //add elements to an array if it is unique
  //is below line is right way to add element ? or i have to write like this - setItems(items.add(input)) ??
   items.add(input);
};
<button onClick={addNumber}>ADD Number</button>;
// trying to display the set data, throws an error:map is not a function
<ul>
{
items.map(item=>(<li>{item}</li>))
}

const[items，setItems]=useState（newset（））；
常量addNumber=（）=>{
//如果数组是唯一的，则向其添加元素
//下面的行是添加元素的正确方法吗？或者我必须这样写-setItems（items.add（input））？？
项目。添加（输入）；
};
增加数字；
//试图显示集合数据时，抛出一个错误：map不是函数

{
items.map（item=>（
{item}
）
}

我想遍历集合以显示数据。

---

提前感谢。

我不会依赖数组长度，因为它可能会改变（添加项目，更糟糕的是，删除项目），所以最简单的方法是获取第一个未使用的

id

或最大使用

id

加1）

后者将如下所示：

const addNumber = () => {
    const ids = items.map(({id}) => id),
          nextId = Math.max(...ids) + 1
    setItems([
          ...items, 
          {
            id: nextId,
            value: input
          }
    ])
}

前者是这样的：

const addNumber = () => {
    const ids = items.map(({id}) => id),
          nextId = [...Array(x.length+1)]
            .map((_,i) => i)
            .find(n => !x.includes(n))
    setItems([
        ...items, 
        {
           id: nextId,
           value: input
        }
    ])
}

以下quick live演示演示如何保持记录值和记录id的唯一性：

const{useState}=React，
{render}=ReactDOM，
rootNode=document.getElementById（'root'））
常量应用=（）=>{
const[items，setItems]=useState（[]），
[errorMsg，setErrorMsg]=useState（），
onAddItem=e=>{
e、 预防默认值（）
setErrorMsg（空）
const formData=新的formData（如目标），
value=formData.get（'myInput'），
id=items.map（（{id}）=>id），
nextId=[…数组（id.length+1）]
.map（（_，i）=>i）
.find（n=>！ids.includes（n））
if（items.some（{value:v}=>v==value））{
setErrorMsg（'值已存在'）
}否则{
设置项([
…项目，
{
id:nextId，
价值
}
])
e、 target.reset（）
}
},
onDeleteItem=\u id=>
setItems（items.filter（（{id}）=>id！==\u id））
返回(
{errorMsg&&{errorMsg}
{！！items.length&&
(

{
items.map（{id，value}）=>(

{value}
onDeleteItem（id）}
className=“removeButton”
>
❌

))
}

)
}
)
}
渲染(
,
根节点
)

.remove按钮{
字体大小：10px；
左边距：20px；
}
.removeButton:悬停{
光标：指针
}
.errorMsg{
字体系列：Arial；
字体大小：10px；
颜色：红色；
}

---

我不会依赖于数组长度，因为它可能会改变（添加项目，更糟糕的是删除项目），所以最简单的方法是获取第一个未使用的

id

或最大使用

id

加1）

后者将如下所示：

const addNumber = () => {
    const ids = items.map(({id}) => id),
          nextId = Math.max(...ids) + 1
    setItems([
          ...items, 
          {
            id: nextId,
            value: input
          }
    ])
}

前者是这样的：

const addNumber = () => {
    const ids = items.map(({id}) => id),
          nextId = [...Array(x.length+1)]
            .map((_,i) => i)
            .find(n => !x.includes(n))
    setItems([
        ...items, 
        {
           id: nextId,
           value: input
        }
    ])
}

以下quick live演示演示如何保持记录值和记录id的唯一性：

const{useState}=React，
{render}=ReactDOM，
rootNode=document.getElementById（'root'））
常量应用=（）=>{
const[items，setItems]=useState（[]），
[errorMsg，setErrorMsg]=useState（），
onAddItem=e=>{
e、 预防默认值（）
setErrorMsg（空）
const formData=新的formData（如目标），
value=formData.get（'myInput'），
id=items.map（（{id}）=>id），
nextId=[…数组（id.length+1）]
.map（（_，i）=>i）
.find（n=>！ids.includes（n））
if（items.some（{value:v}=>v==value））{
setErrorMsg（'值已存在'）
}否则{
设置项([
…项目，
{
id:nextId，
价值
}
])
e、 target.reset（）
}
},
onDeleteItem=\u id=>
setItems（items.filter（（{id}）=>id！==\u id））
返回(
{errorMsg&&{errorMsg}
{！！items.length&&
(

{
items.map（{id，value}）=>(

{value}
onDeleteItem（id）}
className=“removeButton”
>
❌

))
}

)
}
)
}
渲染(
,
根节点
)

.remove按钮{
字体大小：10px；
左边距：20px；
}
.removeButton:悬停{
光标：指针
}
.errorMsg{
字体系列：Arial；
字体大小：10px；
颜色：红色；
}

---

有两种方法可以做到这一点，首先想到的是，你能使用集合而不是数组吗？默认情况下，集合中的每个元素都是唯一的：

第二种方法是先测试项目是否存在，然后有条件地将项目添加到数组中

const addNumber = (number) => {
  // findIndex will return -1 for items which don't already exist in the array
  const index = items.findIndex(item => item === number)

  if ( index === -1 ) {
    // make a copy of the index array to mutate
    const updatedItems = [ ...items ]
    updatedItems.push(number)
    setItems(updatedItems)
  }
}

---

有两种方法可以做到这一点，首先想到的是，你能使用集合而不是数组吗？默认情况下，集合中的每个元素都是唯一的：

第二种方法是先测试项目是否存在，然后有条件地将项目添加到数组中

const addNumber = (number) => {
  // findIndex will return -1 for items which don't already exist in the array
  const index = items.findIndex(item => item === number)

  if ( index === -1 ) {
    // make a copy of the index array to mutate
    const updatedItems = [ ...items ]
    updatedItems.push(number)
    setItems(updatedItems)
  }
}

---

你看过Set的使用了吗嗨，我决定用Set了。但是在显示数据的时候被击中了。请帮忙me@user3359964：我在下面评论了为什么我认为使用

Set

不是一个好主意，不过，我很乐意支持您部署@user3359964:顺便说一句，

Set

最适合基本类型，如字符串或数字，但它不会帮助您存储更复杂的数据（具有多个属性的对象）通常就是这种情况。您是否研究过使用

Set

Hi，我决定使用Set。但是在显示数据时遇到了问题。请