如何在Redux/react中从数组状态中删除对象

Question

当我点击删除按钮时，我想从数组onClick中删除一个对象，我在我的redux中编写了一些代码并做出反应，它不工作!!

我的还原剂

import { ActionsTypes } from "../Constant/ActionsTypes";
argument(state, action)

const initialState = {
events : [],
days : (""),
};

export const SetEventReducer = (state = initialState, action) => {
switch(action.type) {
case ActionsTypes.SET_EVENTS : 
return {... state, events : action.payload};
default : 
return state;
}
};

export const trackDaysReducer = (state= initialState, action) => {
switch(action.type) {
case ActionsTypes.TRACK_DAYS: 
return {... state, days : action.payload}
default : 
return state;
}
};

export const removeEventReducer = (state = initialState,action) => {
switch(action.type) {
case ActionsTypes.REMOVE_EVENT : 
return {}
default : 
return state;
}
};

事件数组表示我的状态数组

包含按钮的事件组件

import React from 'react'
import { useSelector, useDispatch } from 'react-redux';
import { RemoveEvent } from '../Redux/Actions/ActionsEvents';
const Event = () => {
const events = useSelector((state)=> state.allEvents.events);
const removeEvents = useSelector((state)=> state.removeEvents);
const dispatch = useDispatch();
const removeEventHandler = () => {
dispatch(RemoveEvent({}))
}
return (
<section>
{events.map((singleEvent)=> {
const {title, id, day} = singleEvent;
return (
<article className="event-pop-up" key={id} >
<h1>The Name of your Event is <span>{title}</span></h1>
<button className="btn event"
onClick={removeEventHandler}>
Delete Event</button>
</article>
)
})}
</section>
)
}
export default Event;

RemoveEventAction

export const RemoveEvent = (id) => {
return {
type : ActionsTypes.REMOVE_EVENT,
};
};

这是查看应用程序的链接: https://boring-boyd-ecbeee.netlify.app/

你觉得怎么样?由于

Answer 1

试试下面的代码:

:

export const removeEventReducer = (state = initialState,action) => {
switch(action.type) {
case ActionsTypes.REMOVE_EVENT : 
return {... state, events : state.events.filter((event) => event.id !== action.payload)} // payload = id in this case
default : 
return state;
}

然后在包含按钮的事件组件中:

import React from 'react'
import { useSelector, useDispatch } from 'react-redux';
import { RemoveEvent} from '../Redux/Actions/ActionsEvents';
const Event = () => {
const events = useSelector((state)=> state.allEvents.events);
const removeEvents = useSelector((state)=> state.removeEvents);
const dispatch = useDispatch();
const removeEventHandler = (id) => {
dispatch(RemoveEvent(id))
}
return (
<section>
{events.map((singleEvent)=> {
const {title, id, day} = singleEvent;
return (
<article className="event-pop-up" key={id} >
<h1>The Name of your Event is <span>{title}</span></h1>
<button className="btn event"
onClick={()=> removeEventHandler(id)}>
Delete Event</button>
</article>
)
})}
</section>
)
}
export default Event;

然后在你的RemoveEvent动作

export const RemoveEvent = (id) => {
return {
type : ActionsTypes.REMOVE_EVENT, payload: id
};
};

Answer 2

您可以使用事件的id来删除事件。

const removeEventHandler = (id) => {
dispatch(RemoveEvent(id))
}
return (
<section>
{events.map((singleEvent)=> {
const {title, id, day} = singleEvent;
return (
<article className="event-pop-up" key={id} >
<h1>The Name of your Event is <span>{title}</span></h1>
<button className="btn event"
onClick={() => removeEventHandler(id)}>
Delete Event</button>
</article>
)
})}
</section>

将此id传递给reducer后，您可以循环遍历事件数组并从数组中删除此事件并设置新状态。

在你的还原器中，你可以使用filter()方法去除具有id的特定事件

export const removeEventReducer = (state = initialState, action) => {
switch(action.type) {
case ActionsTypes.REMOVE_EVENT : 
return {... state, events : state.events.filter((event) => event.id !== action.payload)}
default : 
return state;
}
}

For Remove Event Action:

export const RemoveEvent = (id) => {
return {
type : ActionsTypes.REMOVE_EVENT,
payload: id,
};
};