How to persist data search param in url in react js

Question

I am working on an app which need to fetch data from api and change data on user input. Here the problem is when user first mount the page they should send a default value monthly and 2020 . But if user made any changes and if they refresh page it should send user updated data. like if user selected 'half-yearly' and 2018 then on refresh it should send half-yearly and 2018 . I am not sure if it is possible in reacjs or not.

I have tried doing this but it is not working it goes by monthly and 2020 every time I refresh page.

Here is my code

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]);

Any help would be great.

Answer 1

When you refresh the page, all data that you have in your app, eg state, props, redux state, etc. is gone. There are several ways to keep the data:

• store it on the backend
• store it in the localStorage as pointed out in the comment above
• store it in the cookies

When you start your app (eg after refresh) you should check whether you have previously saved the data anywhere. Then you set it as default value in the hook

Answer 2

Hi you'd need one function to decode your URL params and one to encode them and sync your state's value and the URL params.

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

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

You would need to be able to pass params to your getPeriodList() function to append the params to your API call.

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

Then whenever the user changes the value, create a new URL and push a new state to 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);

Now when your value are updated, history is updated and it triggers a call to the API with your params.

And also when your refresh params set in the URL get passed to your component.

Answer 3

好吧，谈到刷新整个页面，我想你可以使用 localStorage，要么像useHooks那样的 react-ey 方式，要么像javascript.info 上解释的那样原生。