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

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 是要删除的元素的索引。

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

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 2

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

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

Answer 3

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

例如：

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 4

实施中的一个问题是 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 至于拼接，您需要找到具有id 的元素的索引。但是使用 Filter 就可以做到单行

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

Answer 5

你需要了解，每次我从索引数组中删除一个项目时，该索引使用唯一键...当 React 删除项目 6（示例）时，这是删除数组首先，当 react 重新渲染函数时 react 可以删除另一个组件，因为数组存在键 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;

希望对你有所帮助！

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

How to delete an element from array in react?

javascript

arrays

reactjs

splice