Javascript 使用上下文和reducer删除React中的数组项

我一直在构建一个应用程序，它以数组中的项的形式将数据从数据库拉到React前端。然后，每个项目都有相关信息，其中有一个按钮用于访问该项目的URL，还有一个按钮用于从数据库中删除该项目。这个功能很有效，我已经制作了与数据库交互的API，一切都很好。当按下delete按钮时，事件将从数据库中删除，但不会从UI中删除该项。有人能告诉我哪里会出错吗

我已经为事件创建了一个组件，具有将所有项目映射到前端网格的逻辑：

const Events = () => {
    const eventContext = useContext(EventContext);

    const { events, loading } = eventContext;

    if (loading) {
        return <Spinner />;
    } else {
        return (
            <div style={userStyle}>
                {events.map(event => (
                    <EventItem key={event._id} event={event} />
                ))}
            </div>
        );
    }
};

const userStyle = {
    display: "grid",
    gridTemplateColumns: "repeat(3, 1fr)",
    gridGap: "1rem"
};

export default Events;

---

该项将从数据库中删除，但不会从前端删除。有什么想法吗

感谢您的响应，我是否必须在deleteEvent函数中包含附加逻辑？关于我可以添加的具体内容有什么建议吗？我认为events:state.events.filter（event=>event.\u id！==action.payload）可以通过更新状态而不必从数据库中重新获取数据来解决这个问题？

const EventItem = ({ event }) => {
    const eventContext = useContext(EventContext);

    const { deleteEvent } = eventContext;

    const { _id, Client, Keyword, Source, Url, URL, Shodan_URL, Title, Date, Ip, PhishingAgainst, Preview, Verdict, Port, Product, Version, Expires } = event;

    const onDelete = e => {
        e.preventDefault();
        deleteEvent(_id);
    }

    return (
        <div className="card bg-light text-center">
            {Client ? <h3>Client: {Client}</h3> : null}
            {Keyword ? <p>Keyword: {Keyword}</p> : null}
            {Source ? <h4>Source: {Source}</h4> : null}
            <hr></hr>
            {Url ? <p>URL: {Url}</p> : null}
            {URL ? <p>URL: {URL}</p> : null}
            {Shodan_URL ? <p>URL: {Shodan_URL}</p> : null}
            {Title ? <p>Title: {Title}</p> : null}
            {Date ? <p>Date: {Date}</p> : null}
            {Ip ? <p>IP: {Ip}</p> : null}
            {PhishingAgainst ? <p>Phishing Target: {PhishingAgainst}</p> : null}
            {Preview ? <p>Preview: {Preview}</p> : null}
            {Verdict ? <p>Verdict: {Verdict}</p> : null}
            {Port ? <p>Port: {Port}</p> : null}
            {Product ? <p>Product: {Product}</p> : null}
            {Version ? <p>Version: {Version}</p> : null}
            {Expires ? <p>Expires: {Expires}</p> : null}
            <div>
                <a type="button" href={Url || URL || Shodan_URL} className="btn btn-dark btn-sm my-1">Go to Source</a>
                <button onClick={onDelete} className="btn btn-danger btn-sm my-1">Delete</button>
            </div>
        </div>
    )

}

const EventState = props => {
    const initialState = {
        events: [],
        loading: false,
    }

    const [state, dispatch] = useReducer(EventReducer, initialState);

    // Get Events
    const getEvents = async () => {
        setLoading();
        const res = await axios.get("http://localhost:5000/events");
        dispatch({
            type: GET_EVENTS,
            payload: res.data
        })
    };
    // Clear events
    const clearEvents = () => {
        dispatch({ type: CLEAR_EVENTS });
    };

    // Delete Event
    const deleteEvent = async id => {

        await axios.delete(`http://localhost:5000/events/${id}`);
        dispatch({
            type: DELETE_EVENT,
            payload: id
        })

    };
    const setLoading = () => {
        dispatch({ type: SET_LOADING });
    }

    return <EventContext.Provider
        value={{
            events: state.events,
            loading: state.loading,
            getEvents,
            clearEvents,
            deleteEvent,
        }}
    >
        {props.children}
    </EventContext.Provider>
}

export default EventState;

import {
    GET_EVENTS,
    CLEAR_EVENTS,
    DELETE_EVENT,
    SET_LOADING
} from '../types';

export default (state, action) => {
    switch (action.type) {
        case GET_EVENTS:
            return {
                ...state,
                events: action.payload,
                loading: false,
            };
        case SET_LOADING:
            return {
                ...state,
                loading: true
            };
        case CLEAR_EVENTS:
            return {
                ...state,
                events: [],
                loading: false
            };
        case DELETE_EVENT:
            return {
                ...state,
                events: state.events.filter(event => event._id !== action.payload)
            };
        default:
            return state;
    }
}