ant-design
👑 [需求]记录搜索状态
🥰 需求描述 [详细地描述需求，让大家都能理解]
相信在中后台系统中，大家经常会遇到从列表里面编辑某条数据的情况，编辑完后需要回到之前的页码、搜索条件等这种情况 1.点编辑跳转到一个新的页面，点返回 回到列表页后搜索条件还在、排序状态还在、页码还在 之前编辑的是第二页的第三条，那么返回后应该还是在第二页的第三条
🧐 解决方案 [如果你有解决方案，在这里清晰地阐述]
🚑 其他信息 [如截图等其他信息可以贴在这里]
你有什么好的想法吗？
最近遇到这个情况，还在想解决方案； 想过这样处理，每次触发查询之前 先把搜索条件存到sessionStorage里面(额外加个属性 将这条数据标记为active:false)； 情况一 如果页面是刷新进入 直接从sessionStorage获取缓存的条件 给调用的那 情况二 如果是从子页面点返回，那么返回之前将缓存的active标记为true，然后查询之前判断这个缓存数据的active是true的话用这个作为搜索条件 看各位大佬有没其他好点的方法
我这用途就是 1.浏览器刷新 要能保留之前的搜索条件、排序条件、页码 2.从列表点一条进入编辑页码(路由更改了，非弹窗形式) 然后在编译页码点返回 要能返回到之前的搜索条件、页码、排序 这种
onChange 中拿到所有状态，push 到浏览器 location 地址上。
Table 读取数据时从 location 地址上拿到所有状态复原，并以此为参数去请求数据或填充 Table 的属性。
onChange 中拿到所有状态，push 到浏览器 location 地址上。
Table 读取数据时从 location 地址上拿到所有状态复原，并以此为参数去请求数据或填充 Table 的属性。
url上会存在一些问题的，比如没修改任何查询条件点查询按钮、点重置按钮 如果通过路由push 那push的东西是相同的 但是实际上点查询是每次需要查的 哪怕条件没变
url上会存在一些问题的，比如没修改任何查询条件点查询按钮、点重置按钮 如果通过路由push 那push的东西是相同的 但是实际上点查询是每次需要查的 哪怕条件没变
可以把push改为replace，任何搜索条件的更改都replace路由参数，可能需要对参数类型做下标记，防止解析回来设置的类型不对
onChange 中拿到所有状态，push 到浏览器 location 地址上。 Table 读取数据时从 location 地址上拿到所有状态复原，并以此为参数去请求数据或填充 Table 的属性。
url上会存在一些问题的，比如没修改任何查询条件点查询按钮、点重置按钮 如果通过路由push 那push的东西是相同的 但是实际上点查询是每次需要查的 哪怕条件没变
为什么我的onChange完全不触发呢？
想到一种做法，供参考：
列表页面：
// 搜索状态
const [searchParams, setSearchParams] = useState(props.location?.state?.searchParams || {});
const searchRef = useRef();
useEffect(() => {
if (props.location?.state) {
// 清除状态否则刷新页面之后仍然会按原搜索条件搜索
history.replace();
}
// 自动恢复搜索表单内容
searchRef.current?.setFieldsValue({
...searchParams,
});
}, []);
// 不需要initialValue
const columns = [
...
{
title: '名称',
dataIndex: 'name',
},
...
];
// ...
// 使用Link跳转到编辑页面
<Link to={{
pathname: `/edit/${record.id}`,
state: {
searchParams,
},
}}>
编辑
</Link>
// ...
// 表格
<ProTable
...
formRef={searchRef}
params={searchParams}
onSubmit={setSearchParams}
// 分页的逻辑也不好看，求救
pagination={{
defaultCurrent: searchParams.current || 1,
defaultPageSize: searchParams.pageSize || 20,
onChange: (current, pageSize) => setSearchParams({
...searchParams,
current,
pageSize,
}),
}}
/>
编辑页面：
const onSubmit = (...) => {
// ...
// 使用router跳回去
history.push('/admin/org', {
searchParams: props.location?.state?.searchParams,
});
};
