单击事件后如何从 ReactJS 中的数组中删除对象

Posted 2023-02-22

【中文标题】单击事件后如何从 ReactJS 中的数组中删除对象

【英文标题】：How to remove object from Array in ReactJS after click event

【发布时间】：2021-01-05 16:07:56

【问题描述】：

我正在使用 React 构建小应用程序，单击图标后我无法从 Array 中删除和对象。

我有带有输入的表单，当用户填写此输入并单击一个按钮时，输入将进入一个数组。我有一个状态数组，默认是空数组。

const [attendees, setAttendees] = useState([]);

点击图标后，我有一个从数组中删除对象的功能

const deleteAttendee = (attendee) => 
    setAttendees(
      attendees: attendees.filter(
        (element) => element.firstName !== attendee.firstName
      ),
    );
  ;

但是当我单击图标时出现问题，我收到错误消息。那张地图不是函数。

我在另一个组件中 映射函数 用于从输入呈现每个用户

<div className="attendee-container">
      attendees.map((_attendee, index) => 
        return (
          <div key=index>
            <div onClick=() => deleteAttendee(_attendee)>trashAltIcon</div>
            <h3>
              index + 1. _attendee.firstName _attendee.lastName (
              _attendee.age)
            </h3>
          </div>
        );
      )
    </div>

提前感谢您的帮助。

【参考方案1】：

使用 setState 时，您会像现在一样传入完整的状态对象。但是，当使用 useState 挂钩时，setState 函数只接受该值。

查看这些docs 以了解 setState 和使用 useState 挂钩更新状态之间的区别

setAttendees 接受一个数组，所以你的处理程序应该是

const deleteAttendee = (attendee) => 
   //Pass in filtered array as new state for attendees
   setAttendees( attendees.filter((element) => element.firstName !== attendee.firstName);
;

【参考方案2】：

setAttendees 带有一个参数，可以让你拥有之前的状态。

这是我对你的 deleteAttendee 函数所做的

const deleteAttendee = (event) => 

   const attendeeId = event.target.dataset.id;

   setAttendees((previousState) => previousState.filter((attendee) => attendee.id !== attendeeId))

;

我正在使用以前的状态并更新它，而不是删除名字，而是删除匹配的 ID

这是 jsx 的样子

return (
<div className="App">
  attendees.map((_attendee, index) => 
    return (
      <div key=_attendee.id>
        <div data-id=_attendee.id onClick=(event) => deleteAttendee(event)>trash</div>
        <h3>
          index + 1. _attendee.firstName _attendee.lastName (
          _attendee.age)
        </h3>
      </div>
    );
  )
</div>

);

我正在使用 data-id 属性，因此每当用户单击垃圾桶图标时，我都可以将该事件传递给 deleteAttendee，从属性中获取值并在匹配时过滤掉数组。我之所以进行此更改，是因为我看到您正在根据姓名进行过滤，如果两个与会者的姓名相同怎么办？

参加者的初始状态

const [attendees, setAttendees] = useState([
   
     id: 'tskdh3-3dfdgg-23ds-23dfsdd-2332',
     firstName: 'bob',
     lastName: 'jeo',
     age: 73
  ,
  
     id: 't3-3dfdgg-23ds-23dfsdd-2332',
     firstName: 'bob',
     lastName: 'woah',
     age: 43
  ,
  
     id: 'bsd233-33dfg-3ds-2f3fsdd-2dfdf',
     firstName: 'bob',
     lastName: 'yum',
     age: 23
   
]);

对于要生成的随机 id，您可以使用一个名为 uuid 的 npm 包，它会生成唯一的 id。