Question

我正在开发一个需要从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]);

任何帮助都会很棒。

Answer 1

刷新页面时，您在应用中拥有的所有数据（例如状态，道具，还原状态等都消失了。有几种保存数据的方法：

将其存储在后端
按照上面的评论所述，将其存储在localStorage中
将其存储在cookie中

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

Answer 2

您好，您将需要一种函数来解码URL参数，并需要一种函数对其进行编码并同步状态值和URL参数。

const valueFromURL = decodeYourURLParams(window.location.search)
const [valuesYouExpect, setValuesYouExpect] = useState(valueFromURL);

// or setting your state in useEffect if it's more proper

您需要能够将参数传递给getPeriodList()函数，以将参数附加到API调用中。

useEffect(() => {
   getPeriodList(decodeYourURLParams(window.location.search); // for instance
}, [getPeriodList, valuesYouExpect]);

然后，只要用户更改值，就创建一个新的URL并将一个新的状态推送到history

function updateValues(newValues) {
  const updatedValues = { ...valuesYouExpect, ...newValues };
  const { pathname, origin } = window.location;
  const newURL = `${origin}${pathname}?${encodeYourUrlParams(updatedValues)}`;

  // now change the URL
  window.history.replaceState({}, '', newURL);

  updateStateValues(updatedValues);

现在，当您更新值时，history也将更新，并会触发使用您的参数的API调用。

还有在URL中设置的刷新参数传递给组件时。

Answer 3

那么，在谈论刷新整个页面时，我想您可以使用localStorage，既可以像useHooks中那样使用react-ey方式，也可以使用javascript.info中所介绍的本机方式。

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

3 个答案: