您现在的位置是:首页 > 正文

Table列表筛选结果保持不变

2024-02-01 05:24:07阅读 3

场景描述:

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())
     }
   />

网站文章

  • centos和Ubuntu在线安装docker、docker-compose

    centos和Ubuntu在线安装docker、docker-compose

    然后设置全局Docker容器日志大小,并修改docker的存储目录,在/etc/docker目录创建daemon.json文件,然后写入以下内容,最后重启docker和系统加载文件。然后设置全局Doc...

    2024-02-01 05:24:01
  • Java制作简单的单选和多选测试题

    Java制作简单的单选和多选测试题 题目: 定义考题类(Question)及其子类 完成考题类(Question),单选题(SingleChoice)和多选题(MultiChoice)是其子类 要求:...

    2024-02-01 05:23:31
  • pmm最新版本v2.40.0尝鲜体验

    pmm最新版本v2.40.0尝鲜体验

    让DBA快速初窥pmm v2.40.0

    2024-02-01 05:23:24
  • web安全第九天:服务器端请求伪造漏洞SSRF

    web安全第九天:服务器端请求伪造漏洞SSRF

    web安全第十天:服务器端请求伪造漏洞SSRF

    2024-02-01 05:23:15
  • 初学kafka命令(topics)

    创建kafka topicbin/kafka-topics.sh --create --topic topicname --replication-factor 1 --partitions 1 --zookeeper localhost:2181查询topic,进入kafka目录:bin/kafka-topics.sh --list --zookeeper localhost:2181查...

    2024-02-01 05:23:08
  • 【C语言】——打印杨辉三角(递归)

    【C语言】——打印杨辉三角(递归)

    觉得我分享的文章不错的话,可以关注一下哦,嘻嘻嘻🌞🌞

    2024-02-01 05:22:40
  • Java任务超时处理机制实现

    1问题描述 在应用软件的开发中,经常会遇到这样的一种需求:需要实现一个方法来执行某种任务,而这个方法的执行时间不能超过指定值,如果超时,则调用者不管这个方法将来是否可能执行成功,都要中断它的执行,或者让这个方法返回。这就是超时处理问题。 根据执行任务的方法是否异步,可以把问题从两个方面分析:如果方法顺序执行,则方法执行时整个程序的控制权在执行任务的方法中,方法调用者对于

    2024-02-01 05:22:33
  • 一个字节是几位?

    一个字节为8位。字节含义:字节是计算机信息技术用于计量存储容量的一种计量单位,也表示一些计算机编程语言中的数据类型和语言字符。数据存储是以“字节”(Byte)为单位,数据传输是以大多是以“位”(bit...

    2024-02-01 05:22:27
  • 【MATLAB】如何安装配置MinGW-w64 C/C++编译器 热门推荐

    【MATLAB】如何安装配置MinGW-w64 C/C++编译器 热门推荐

    【MATLAB】如何安装配置MinGW-w64 C/C++编译器 win10 + matlab2018b 具体方法: 1.打开你的matlab,选择“附加功能”,选择“获取附加功能” 2.在“附加功能...

    2024-02-01 05:22:00
  • 25.理一理关于tensorflow的各种骚操作

    1.tf.squeezehttps://www.jianshu.com/p/a21c0bc10a382.tf.casthttps://blog.csdn.net/dcrmg/article/details/797478143.tf.expand_dims https://www.cnblogs.com/helloworld0604/p/90017...

    2024-02-01 05:21:53