如何解决点击事件后如何从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。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。