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

Question

我有两个函数，其中一个在数组中添加一个项目，另一个使用 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]);
    }

Answer 1

实现中的一个问题是 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));
};

Answer 2

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

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

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

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

更多：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

Answer 3

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

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

Answer 4

您可以通过从数组中查找其索引来删除该项目。

例如：

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);
}

Answer 5

您需要理解，每次我从索引数组中删除一个项目时，该索引都使用唯一键...当 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;

希望对你有所帮助！