React：执行DELETE请求后表格数据无法刷新的问题求助

需求：

• 页面加载时发起GET请求获取API数据并展示在表格中
• 管理员点击删除按钮发送DELETE请求后，表格自动刷新以移除已删除的行

当前问题：
执行DELETE请求时，GET请求先于DELETE请求完成，导致表格数据未更新；将patientList添加到useEffect的依赖数组中，会触发GET请求重复调用。

解决方案 #

1. 修复删除操作的异步执行顺序 #

问题根源是deleteHandler中未等待DELETE请求完成就发起GET请求，导致请求顺序混乱。修改Screen.js中的deleteHandler，用async/await确保异步操作按顺序执行：

const deleteHandler = async (patient) => {
    if (window.confirm(`Are you sure you want to delete ${patient.first_name} ${patient.last_name} (${patient.patient_reference})?`)) {
        await dispatch(delete_patient_by_id(patient.id));
        dispatch(get_patient_list());
    }
};

2. 完善Reducer的状态更新逻辑 #

当前Reducer未处理PATIENT_DELETE_SUCCESS和PATIENT_DELETE_FAIL事件，需要补充对应逻辑。同时可以在删除成功后直接从本地列表中移除对应条目，减少一次GET请求：
修改Reducers.js：

import {
    PATIENT_LIST_REQUEST,
    PATIENT_LIST_SUCCESS,
    PATIENT_LIST_FAIL,
    PATIENT_DELETE_SUCCESS,
    PATIENT_DELETE_FAIL
} from "../constants/userConstants";

const initialState = {
    patientList: null
};

export default function(state = initialState, action) {
    const { type, payload } = action;

    switch(type) {
        case PATIENT_LIST_REQUEST:
            return { 
                ...state
            }
        case PATIENT_LIST_SUCCESS:
            return {
                ...state,
                patientList: payload
            }
        case PATIENT_LIST_FAIL:
            return {
                ...state,
                patientList: payload
            }
        case PATIENT_DELETE_SUCCESS:
            // 删除成功后过滤掉对应ID的患者，直接更新本地状态
            return {
                ...state,
                patientList: state.patientList?.filter(patient => patient.id !== payload)
            }
        case PATIENT_DELETE_FAIL:
            // 删除失败时保持原状态，可根据需求添加错误提示逻辑
            return state
        default:
            return state
    };
};

3. 传递删除ID到Action #

修改Actions.js中的delete_patient_by_id，在删除成功时将患者ID作为payload传递给Reducer：

export const delete_patient_by_id = (id) => async (dispatch, getState) => {
    try {
        const res = await axios({
            method:'delete', 
            url: `${process.env.REACT_APP_API_URL}api/v1/patients/delete/${id}/`, 
            xsrfCookieName: 'csrftoken',
            xsrfHeaderName: 'X-CSRFTOKEN',
            withCredentials: true
        })

        if (res.data.success) {
            dispatch({
                type: PATIENT_DELETE_SUCCESS,
                payload: id // 传入被删除患者的ID
            });
        } else {
            dispatch({
                type: PATIENT_DELETE_FAIL
            });
        }
    } catch (err) {
        dispatch({
            type: PATIENT_DELETE_FAIL
        });
    }
};

4. 优化请求逻辑（可选） #

如果采用Reducer本地更新状态的方式，可以删除deleteHandler中的dispatch(get_patient_list())，避免额外的GET请求，提升性能：

const deleteHandler = async (patient) => {
    if (window.confirm(`Are you sure you want to delete ${patient.first_name} ${patient.last_name} (${patient.patient_reference})?`)) {
        await dispatch(delete_patient_by_id(patient.id));
        // 无需手动刷新列表，Reducer已自动更新状态
    }
};

内容的提问来源于stack exchange，提问作者Mike J