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

问题描述

我在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>

预先感谢您的帮助。

解决方法

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

,

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',lastName: 'woah',age: 43
  },{
     id: 'bsd233-33dfg-3ds-2f3fsdd-2dfdf',lastName: 'yum',age: 23
   }
]);

要生成随机ID，请使用一个名为uuid的npm包，它会生成唯一ID。