如何在反应中从数组中删除一个元素？

问题描述

我有两个函数，其中一个在数组中添加一个项目，另一个使用 React JS（钩子）从该数组中删除。[两者都是点击事件的处理程序]。
我的工作不正确。
``id`` 来自``contact.length`` 我用``contacts.splice(id,1)`` 删除了它。
我不知道为什么会出现这个问题。
它不会删除将点击的内容，而是随机删除的内容。

function handleAddRecord(nameValue,phoneValue) {
        setContacts([...contacts,{
            id : contacts.length,name : nameValue,phone : phoneValue
        }])
    }
    

    function handleDelete(id) {
        console.log("manager",id);
        const newContacts =  contacts.splice([id],1);
        setContacts([...newContacts]);
    }

解决方法

这里我们假设 id 是要删除的元素的索引。

splice 函数返回删除的元素，因此获取其结果没有用。相反，首先复制数组，然后删除不需要的元素：

function handleDelete(id) {
    console.log("manager",id);
    const newContacts =  [...contacts];
    newContacts.splice(id,1);
    setContacts(newContacts);
}

那是因为 splice 改变了数组本身。

好的，id 返回当前地图的索引？按照这个例子：

const assoc = [...contacts];
assoc.splice(id,1);
setContacts(assoc);

您可以通过从数组中找到它的索引来删除该项目。

例如：

function handleDelete(id) {
   console.log("manager",id);
   const index = contacts.findIndex((x) => x.id === id);
   const newContacts = [
      ...contacts.splice(0,index),...contacts.splice(index + 1),];
   setContacts(newContacts);
}

实现中的一个问题是 id 生成保持它的数组长度可能会导致问题，因为您删除和添加元素可能会出现多个项目具有相同 id 的情况。

最广泛使用的生成器之一是 uuid https://www.npmjs.com/package/uuid

用法

const uuid = require("uuid");
uuid.v4(); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'

现在在您的实现中使用它

添加操作：

const handleAddRecord = (nameValue,phoneValue) => {
  const newRecord = {
    id: uuid.v4(),// This should be unique at all times
    name: nameValue,phone: phoneValue,};
  setContacts([...contacts,newRecord]);
};

删除操作：

使用 filter 而不是 splice，因为对于 splice，您需要找到带有 id 的元素的索引。但是使用 Filter 就可以做到一行

const handleDelete = (id) => {
  setContacts(contacts.filter(item => item.id !== id));
};

你需要理解，每次当我从索引数组中删除一个项目时，这个索引使用唯一键......当 React 删除一个项目 6（一个例子）时，这是首先删除数组，而当react re-render函数react可以删除另一个组件时，因为数组存在key 6，如果你有更多的6项从数组...明白吗？

举个例子：

import React,{ useState } from 'react';

function User(data) { // data is a array

  const [contacts,setContacts] = useState(data); // data return a list of contacts

  /* contacts result a array object and has the following attributes 
    [{
      name: 'Cael',tel_number: '+55 11 9999-999',e_mail: 'user@example.com',!   moment: "2021-06-15T05:09:42.475Z" // see this a date in ISO string
    }]
  */

  // about moment atribute:
  // this atribute result when use `new Date().toISOString()`
  // and this value is added in the moment that create a object in array list
  // It's mean that every time result a unique key

  const deleteFn = (val) => { // val result index of component and item array
    const assoc = [...contacts];
    assoc.splice(val,1);
    setContacts(assoc);
  }

  return (
    <div>
      {!!contacts.length &&
      contacts.map((assoc,i) => { // variable i result in your id
        const { moment,name,e_mail,tel_number } = assoc; // moment use a unique key
        return (
          <li key={moment}> 
            <span>{name}</span>
            <span>{e_mail}</span>
            <span>{tel_number}</span>
            <button type="button" onClick={() => deleteFn(i)}>Delete</button>
          </li>
        );
      })}
    </div>
  );
}

export default User;

希望对你有帮助！

arrays arrays arrays javascript reactjs reactjs reactjs reactjs splice