如何删除元素后用数组更新恢复

90 阅读1分钟

我得到一个元素的列表,当我从数组中删除一个元素时,一切都很顺利,直到我得到新的状态。在还原器中,除了在视图中我必须更新它以获得表格的新渲染外,其他都是正常的。我使用了useEffect,但它不起作用。在reducer层面,所有新的最新数据都被检索到。我不明白为什么即使使用useEffect我也不能更新我的数组。谢谢你的帮助。

const GetListAllCommand = (props) =>{
    const dispatch = useDispatch();
    const ifIsCommand = useSelector(state=> state?.reducerCommandAdmin?.state)
    const {listCommand, setListCommand} = props;
    useEffect(() => {
        setListCommand(ifIsCommand);
        getAllCommandAllClientsAdminService(dispatch);
      }, [listCommand]);

    const deleteCommand = (id) => {
      deleteCommandByIdAdminService(dispatch, id);
      setListCommand(ifIsCommand);
      getAllCommandAllClientsAdminService(dispatch);
    };

    const ListAllCommand = () => {
        if (listCommand === undefined) {
           setListCommand(ifIsCommand)
        }
    
        return listCommand?.map((command, index) => {
            return (
                <Commands deleteCommand={deleteCommand} command={command} index={index} />
            )
        })
    }

    // useEffect(() => {
    //     setListCommand(ifIsCommand);
    //     console.log(listCommand)
    //     getAllCommandAllClientsAdminService(dispatch);
    //     ListAllCommand()
    //   }, [listCommand]);

    return(
        <>
            <ListAllCommand />
        </>
    )
}

减速器

const initialState = {
    data:{
    dateCommande: "",
    dateDuJour: "",
    horaire: "",
    idBoutique: "",
    id_admin: "",
    id_commande: "",
    id_patisserie: "",
    id_reservation:"", 
    id_user: "",
    isAdmin: "",
    livraison: "",
    nomBoutique: "",
    pays: ""
    },
    message:""
}
    

export default function CommandManagementAdmin(state = initialState,action){
    const {type, payload} = action;
    switch (type) {
        case ActionTypes.GET_ALL_COMMAND_ADMIN:
            return {state : payload}

        case ActionTypes.GET_ALL_COMMAND_ID_CLIENT_ADMIN:
            return payload;

        case ActionTypes.DELETE_COMMAND_BY_ID_ADMIN:
            return state === Object.values(state).filter((command) => command.id_commande !== payload)

        case ActionTypes.ERROR_GET_ALL_COMMAND_BY_ID_CLIENT_ADMIN:
            return { ...state, payload };
            
        default:
            return state;
    }
}