我如何从 Redux/react 中的数组 state 中删除 object

Question

当我点击删除按钮时，我想从数组 onClick 中删除一个 object，我在我的 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;
    }

};

事件数组代表我的 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;

移除事件动作

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 后，您可以遍历事件数组并从数组中删除此事件并设置新的 state。

在你的 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;
    }
}

对于删除事件操作：

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