javascript - 如何在React JS中持久保存URL中的数据搜索参数

我正在开发一个需要从api获取数据并更改用户输入数据的应用程序。这里的问题是，当用户第一次安装页面时，他们应该发送默认值monthly和2020。但是，如果用户进行了任何更改，并且刷新了页面，则应该发送用户更新的数据。就像如果用户选择“每半年一次”和2018一样，则在刷新时，它应该发送half-yearly和2018。
我不确定reacjs是否可行。
我尝试这样做，但是每次刷新页面时，monthly和2020都会失败。
这是我的代码

const DispensingIncidents = (props) => {
  const classes = useStyles();
  const {
    getFilterData,
    dispensingData,
    getPeriodList,
    getOverviewData,
    location,
    history,
  } = props;

  const [timeSpan, setTimeSpan] = React.useState("Monthly");
  const [year, setYear] = React.useState(2020);
  const [tabValue, setTabValue] = React.useState(0);
  const [spanData, setSpanData] = React.useState([]);
  const { loading, duration, period, dispensingOverviewData } = dispensingData;
  const { count } = dispensingOverviewData;

  useEffect(() => {
    getPeriodList();
  }, [getPeriodList]);

  useEffect(() => {
    history.replace({
      pathname: location.pathname,
      search: `?year=${year}&period=${timeSpan}`,
    });
    setYear(year);
    setTimeSpan(timeSpan);
    // eslint-disable-next-line
  }, [year, timeSpan]);

  useEffect(() => {
    getFilterData(year);
  }, [getFilterData, year]);

  function useQuery() {
    return new URLSearchParams(location.search);
  }
  const query = useQuery();



  // eslint-disable-next-line
  const handleTabChange = (event, newValue) => {
    setTabValue(newValue);
  };

  const handleYearChange = (event) => {
    setYear(event.target.value);
    setTimeSpan(query.get("period"));
  };

  const handleSpanChange = (event) => {
    const value = event.target.value;

    setTimeSpan(value);
  };

  const time = query.get("period");

  useEffect(() => {
    if (time === "Yearly") {
      const yearlyData = duration["yearly"];
      setSpanData(yearlyData);
    } else if (time === "Weekly") {
      const weeklyData = duration["weekly"];
      setSpanData(weeklyData);
    } else if (time === "Quarterly") {
      const quarterlyData = duration["quarterly"];
      setSpanData(quarterlyData);
    } else if (time === "Monthly") {
      const monthlyData = duration["monthly"];
      setSpanData(monthlyData);
    } else if (time === "6 months") {
      const halfYearlyData = duration["half-yearly"];
      setSpanData(halfYearlyData);
    }
  }, [time, duration]);

任何帮助都会很棒。

最佳答案

刷新页面时，您在应用中拥有的所有数据(例如状态， Prop ，还原状态等都消失了。
有几种保留数据的方法:

将其存储在后端

按照

上面的注释所指出的那样将其存储在localStorage中

将其存储在cookie中

当您启动应用程序时(例如刷新后)，您应该检查是否以前已将数据保存在任何地方。然后将其设置为挂钩中的默认值