时间戳

首页 > 解决方案 > 如何在反应js中将数据搜索参数保留在url中

javascript - 如何在反应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]);

任何帮助都会很棒。

标签： javascriptreactjs

解决方案

当您刷新页面时，您在应用程序中拥有的所有数据，例如状态、道具、redux 状态等都消失了。有几种方法可以保存数据：

  • 将其存储在后端
  • 将其存储在上面评论中指出的 localStorage
  • 将其存储在 cookie 中

当您启动您的应用程序时（例如刷新后），您应该检查您之前是否已将数据保存在任何地方。然后你将它设置为钩子中的默认值

推荐阅读