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

【问题标题】：How to remove object from Array in ReactJS after click event单击事件后如何从 ReactJS 中的数组中删除对象
【发布时间】：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>

提前感谢您的帮助。

【问题讨论】：

标签： javascript arrays reactjs javascript-objects

【解决方案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。

【讨论】：