React+antd 时间选择器开发时遇到无限循环问题

153 阅读1分钟

在用antd开发时间选择器的时候,有一个需求是把表单的数据可以存到本地,下次进入的时候需要反显时间选择器的value

在遇到这个问题我第一时间想到用localStorage存到本地,然后下次进入的时候 把值赋给表单的各个属性就行了

别的都很顺利,就是时间选择器,刚开始我直接用 ISO 8601 格式存到本地 然后发现存进去的时候是个对象 ,从本地存储拿的时候就变成了两个字符串,回显失败!

然后我又想到先转成时间戳 存进去然后拿出来的拿出来的时候转成ISO 8601格式

  const data = JSON.parse(localStorage.getItem('fire-form-params'))
    if (data) {
      const startTime = moment(new Date(data.date[0]))
      const endTime = moment(new Date(data.date[1]))
  
      let params = {
        instruments: data.instruments,
        confidence: [data.minConfidence, data.maxConfidence],
        firePower: [data.minFirePower, data.maxFirePower],
        date: [startTime,endTime],
      };
   
        setFormParams({
          ...params,
          satellites: [],
          feature: '',
        });
        console.log(params, "初始化表单参数");

结果反显成功了 但是 点击选择日期的时候会一直往下一年跳 死活调不好

最后是看antd官网里边用的dayjs时间格式进行反显

接着修改代码

      const startTime = dayjs.unix(data.starTime)
      const endTime = dayjs.unix(data.endTime)
      console.log(data.starTime, "startTime")
      let params = {
        instruments: data.instruments,
        confidence: [data.minConfidence, data.maxConfidence],
        firePower: [data.minFirePower, data.maxFirePower],
        date: data.startTime ? [] : [startTime, endTime],
        satellites: data.satellites
      };

然后就可以反显成功了 !!