场景描述：
Table在列表页做完筛选之后，点击进入详情或新增之后再返回，列表的筛选结果不变
实现原理：
1.点击新增或编辑的时候，获取筛选的值，将值存在sessionStorage中（searchData）,再存一个值，将列表页面路径存下（urlLink）。
2.在列表和筛选调用的函数中（handleSubmit()），
①判断，从新增或编辑页跳转到其他页面，非该列表下，通过判断页面路径非存下的列表路径，将存下的筛选数据清空，以免影响其它列表的数据
②判断，从新增或编辑返回的是该列表页，将数据取出进行渲染,
无论重新筛选或是跳回来渲染完，都需要将sessionStorage清掉。
3.若在新增或编辑页新增成功或编辑成功之后，返回列表页不需要保留筛选数据，需要在新增成功后就将sessionStorage清掉。
代码如下：
<Button type="primary" style={
{
marginBottom: '30px' }}
onClick={
async () => {
const values = await this.form.validateFields();
const {
pageNumber, pageSize } = this.state;
sessionStorage.setItem(
"searchData",
JSON.stringify({
values: values, pageNumber, pageSize })
);
sessionStorage.setItem(
"urlLink",
window.location.pathname
);
this.props.history.push({
pathname: "/marketing/couponCode/_/add",
});
}}>新增</Button>
{
title: "操作", dataIndex: "operator", width: 90,
render: (value, record) => {
const {
id } = record
const items = [
{
label: '查看',
onClick: async () => {
const values = await this.form.validateFields();
const {
pageNumber, pageSize } = this.state;
sessionStorage.setItem(
"searchData",
JSON.stringify({
values: values, pageNumber, pageSize })
);
sessionStorage.setItem(
"urlLink",
window.location.pathname
);
this.props.history.push({
pathname: "/marketing/couponCode/_/check",
state: {
id: id, type: "check" },
});
},
}
]
return <Operator items={
items} />;
}
},
componentDidMount() {
this.handleSubmit();
}
handleSubmit = async () => {
if (this.state.loading) return;
if (window.location.pathname != sessionStorage.getItem("urlLink")) {
sessionStorage.removeItem("searchData")
}
if (sessionStorage.getItem("searchData")) {
const {
values, pageNumber, pageSize } = JSON.parse(
sessionStorage.getItem("searchData")
);
this.form.setFieldsValue({
...values });
this.state.pageNumber = pageNumber;
this.state.pageSize = pageSize;
}
const values = await this.form.validateFields();
// 生成时间
const createStartTime = !values.createTime ? '' : moment(values.createTime[0]._d).format('YYYY-MM-DD 00:00:00')
const createEndTime = !values.createTime ? '' : moment(values.createTime[1]._d).format('YYYY-MM-DD 23:59:59')
const {
pageNumber, pageSize } = this.state;
const params = {
...values,
pageNumber,
pageSize,
createStartTime,
createEndTime
};
this.setState({
loading: true });
this.props.ajax
.post("/market/discount/page", params)
.then((res) => {
if (res.success) {
const dataSource = res.data.records || [];
sessionStorage.removeItem("searchData")
sessionStorage.removeItem("urlLink")
const total = res.data.total || 0;
this.setState({
dataSource, total });
}
})
.finally(() => this.setState({
loading: false }));
};
this.props.ajax.post('/market/discount/update', params)
.then(res => {
if (res.state === 1) {
sessionStorage.removeItem("searchData")
sessionStorage.removeItem("urlLink")
message.success('保存成功')
this.props.history.goBack();
}
})
详解React中setState回调函数
setState()并不总是立即更新组件。它可能会批量更新或将更新推迟到以后。这使得this.state在调用setState()潜在陷阱后立即阅读。取而代之的是使用componentDidUpdate或setState回调 ( setState(updater, callback))，它们都保证在应用更新后触发。
在使用React过程中，中可以使用this.state来访问需要的某些状态，但是需要更新或者修改state时，一般而言，我们都会使用setState()函数，从而达到更新state的目的，setState()函数执行会触发页面重新渲染UI。但是！！！setState是异步的！！！
1. 语法：
setState(updater[, callback]) //
updater是要改变的state对象，callback是state导致的页面重新渲染的回调，等价于componentDidUpdate
一般而言，在设置页面某些state的时候，需要先设置好state，然后再对页面的一些参数进行修改的时候，可以使用setState的回调函数。
2. 分析一下区别
不在回调中使用参数，我们在设置state后立即使用state：
this.state = {
foo: 1}; this.setState({
foo: 123}); console.log(this.state.foo); // 1
在回调中调用设置好的state
this.state = {
foo: 2}; this.setState({
foo: 123}, ()=> {
console.log(foo); // 123 });
关于setState的回调函数的作用大概如此，这个函数相当于componentDidUpdate函数，和生命周期的函数类似。
<Table
loading={
loading}
columns={
this.columns}
dataSource={
dataSource}
rowKey="id"
pageNum={
pageNumber}
pageSize={
pageSize}
/>
<Pagination
total={
total}
pageNum={
pageNumber}
pageSize={
pageSize}
showTotal={
total => `总条数： ${
total}`}
onPageNumChange={
(pageNum) =>
this.setState({
pageNumber: pageNum }, () => this.handleSubmit())
}
onPageSizeChange={
(pageSize) =>
this.setState({
pageSize, pageNumber: 1 }, () => this.handleSubmit())
}
/>