我如何從 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,
    };
};