已知组件ProTable有search属性,ProTable已经有三个请求后端数据的搜索项(字段),分别是simType、descript和simuUser,搜索哪个字段就在URL上拼接哪个字段,如何用react+typescript+history的方式实现页面刷新保持search的三个搜索项(字段)的数据和状态,(不要使用useEffect)
时间: 2024-03-27 14:37:48 浏览: 153
要实现页面刷新保持search的三个搜索项(字段)的数据和状态,可以使用React Router提供的history对象来获取URL参数,并根据参数设置ProTable组件的搜索状态。具体实现步骤如下:
1. 在ProTable组件中添加search属性,用来保存当前的搜索状态。例如,可以定义一个SearchType类型来表示搜索状态的类型,并将search属性的类型设置为SearchType:
```typescript
import { Table } from 'antd';
type SearchType = {
simType?: string;
descript?: string;
simuUser?: string;
};
function MyTable(props: { search: SearchType }) {
const { search } = props;
// 其他代码
return <Table {...otherProps} />;
}
```
2. 在页面组件中使用useEffect hook来监听URL的变化,并根据URL参数设置ProTable组件的search属性。注意,这里不要直接在useEffect hook中修改search属性,因为这会导致组件的重新渲染。应该先将修改后的search状态保存在局部变量中,然后再使用setState函数来更新组件的search状态。
```typescript
import { useEffect, useState } from 'react';
import { useHistory } from 'react-router-dom';
function MyPage() {
const history = useHistory();
const [search, setSearch] = useState<SearchType>({});
useEffect(() => {
const params = new URLSearchParams(history.location.search);
const simType = params.get('simType');
const descript = params.get('descript');
const simuUser = params.get('simuUser');
const newSearch: SearchType = {};
if (simType) newSearch.simType = simType;
if (descript) newSearch.descript = descript;
if (simuUser) newSearch.simuUser = simuUser;
setSearch(newSearch);
}, [history.location.search]);
return <MyTable search={search} />;
}
```
在上面的代码中,我们使用了useEffect hook来监听URL的变化,并根据URL参数设置ProTable组件的search属性。具体来说,我们使用了useHistory hook来获取history对象,并在useEffect hook中监听history.location.search的变化。当URL的查询参数发生变化时,我们使用URLSearchParams对象来获取simType、descript和simuUser参数的值,并将它们保存在一个新的search对象中。最后,我们使用setState函数来更新组件的search状态,从而触发组件的重新渲染。
通过以上的实现,我们就可以在页面刷新后保持ProTable组件的搜索状态了。当页面加载时,我们会根据URL的查询参数来设置搜索状态,并将搜索状态传递给ProTable组件。这样,ProTable组件就可以正确地显示当前的搜索状态,并根据搜索状态来请求后端数据。
阅读全文