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

我正在React中构建一个小应用程序，在单击图标后，我有一个问题要从数组中删除和删除对象

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

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>

{Attendes.map（_attendee，index）=>{
返回(
deleteAttendee（_attendee）}>{trashAltIcon}
{index+1}.{{u attendee.firstName}{{u attendee.lastName}(
{{u attendee.age}）
);
})}

---

提前感谢您的帮助。

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

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

SetAttendes接受一个数组，因此您的处理程序应该是

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

---

SetAttendes附带了一个参数，允许您具有以前的状态

以下是我对deleteAttendee函数所做的操作 我正在使用以前的状态并更新它，而不是删除名字，而是删除匹配的ID

以下是jsx的外观 对于要生成的随机ID，您可以使用一个名为uuid的npm包，它生成唯一的ID

const deleteAttendee = (event) => {

   const attendeeId = event.target.dataset.id;

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

};

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>

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