使用umi的keep Alive实现详情编辑页面的回退,保留列表的查询条件

前言: 对于这种沙雕还有智障的需求,我们说了我们拒绝但是领导有显得非常不高兴,觉得你很不愿意干活,希望有领导产品看到这篇帖子的时候请记住你认为的想法都是傻X的,要是这个功能很好用的话,为什么知名的网站详情页面或者编辑页面不这样做呢,自以为是最傻X,废话不哔哔上代码

import KeepAlive from 'react-activation'; // 在此处还得依赖一个umi-plugin-keep-alive,这样的库否则有bug
import ProTable from '@ant-design/pro-table';
import { connect, history, useLocation } from 'umi';

import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react';
let modelues = ({ dispatch }, ref) => { 
    const actionRef = useRef();
    const formRef = useRef();
    const queryList = async (values) => {
       return { data: [], success: true, total: 0 };
    };

    useImperativeHandle(ref, () => {
        return {
            reload: () => {
                actionRef.current && actionRef.current.reload();
            },
            reset: () => {
                formRef.current?.resetFields();
                formRef.current?.submit();
                //    actionRef.current?.reset();
            },
        };
    });

    <ProTable
       actionRef={actionRef}
       formRef={formRef}
       request={(params) => queryList(params)}
       columns={columns}
       rowKey={(record) => record.id}
       pagination={{ pageSize: 10, showSizeChanger: true }}
    />
}

modelues = forwardRef(modelues);
const Report = (props) => {
    const location = useLocation();
    const childRef = useRef();

    useEffect(() => {
        const { alive } = location.query;
        if (alive) {
            childRef.current && childRef.current.reload();
        } else {
            childRef.current && childRef.current.reset();
        }
    }, []);

    return (
        <>
            <KeepAlive>
                <modelues {...props} ref={childRef} />
            </KeepAlive>
        </>
    );
};
export default connect(() => {})(Report );

以上就是代码,大家可以先看umi官网的模板试试看,然后试一下我写的这个方法

说到最后希望这篇帖子能够帮助到你，代码可以抄但是更得理解，多敲才是王道希望你对代码有着真挚的感情，对自己敲出的代码都有不一样的自信，感谢您的浏览，愿您走出半生，归来仍是少年,要是对您有所帮助您留下你的赞吧