微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

在 swr 中获取新数据时避免加载状态

如何解决在 swr 中获取新数据时避免加载状态

每当我使用不同的查询参数在 swr 中请求新数据(即单击上一个和下一个按钮)时,就会在我的代码中触发加载。这意味着数据似乎被清除,然后被新数据替换。怎样才能做到只用新数据替换旧数据,从而不触发加载?

component.ts

class Address {
  final int FID;
  final String addr;

  Address(this.addr,this.FID);

  Address.fromMap(Map m)
      : this.addr = m["Adresse"],this.FID = m["FID"];
}

static Future<List<Address>> loadJsonData() async {
    var jsonText = await rootBundle.loadString('assets/Json/CDV.json');
    data = json.decode(jsonText);
    var list = [];
    for(int i = 0; i < data.length; i++){
      list.add(Address.fromMap(data[i]["attributes"]);
    }
    
    return list;
  }

taskService.ts

import React,{ useState } from "react";
import { cloneDeep } from "lodash";

import Day from "components/Day";
import DragDropContext from "shared/components/DragDropContext";
import Loading from "shared/components/Loading";
import task from "services/taskService";
import { DragEndResult,ITaskList } from "types";
import { addDays } from "utils/dateTime";

import styles from "./Days.module.scss";

const Days = () => {
  const firstDay = addDays(new Date(),-1);
  const [dates,setDates] = useState({
    start: firstDay,end: addDays(firstDay,4)
  })

  const { data: taskLists,mutate } = task.current(dates.start,dates.end);

  const handleArrowClick = async (direction: "prev" | "next") => {
    if(direction === "next") {
     setDates({
       start: addDays(dates.start,1),end: addDays(dates.end,});
    } else if (direction === "prev") {
      setDates({
       start: addDays(dates.start,-1),});
    }
  }

  return (
    <>
      {!taskLists && <Loading />}
      <div className={styles.days}>
        <div className={styles.prev} onClick={() => handleArrowClick("prev")}>
          <div className={styles.arrow}></div>
        </div>
        <div className={styles["days__slide"]}>
          <DragDropContext onDragEnd={handleDragEnd}>
            {taskLists &&
              Object.values(taskLists).map((taskList: ITaskList) => {
                return (
                  <Day
                    key={taskList.date}
                    onAddTask={handleAddTask}
                    onRemove={handleRemoveTask}
                    {...taskList}
                  />
                );
              })}
          </DragDropContext>
        </div>
        <div className={styles.next} onClick={() => handleArrowClick("next")}>
          <div className={styles.arrow}></div>
        </div>
      </div>
    </>
  );
};

export default Days;


版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?