Typescript 如何使用useSearchParams保持状态

我可以将两个单独的setSearchParams(searchParams => .....)个呼叫排入队列，以设置单独的搜索参数，并且搜索字符串将按预期使用这两个值进行更新.这是使用104-useSearchParams挂钩.据我所知，使用两个105 useSearchParams钩子导致了一种比以前的searchParams更新的"陈旧闭包".

我在这里的建议是创建一个Reaction上下文提供程序，它可以提供103、searchParams和setSearchParams到all、useSearchParamsState的钩子，以便它们都引用相同的闭包.

示例:

SearchParams.hooks.tsx

import { createContext, useContext } from 'react';
import { useSearchParams, SetURLSearchParams } from 'react-router-dom';

const decodeSearchParam = (searchParam: string) => {
  try {
    return JSON.parse(searchParam);
  } catch {
    return searchParam;
  }
};

const SearchParamsStateContext = createContext<[
  searchParams: URLSearchParams,
  setSearchParams: SetURLSearchParams
]>([
  new URLSearchParams(""),
  (search: unknown) => {},
]);

const SearchParamsStateProvider = ({ children }: React.PropsWithChildren<{}>) => {
  const [searchParams, setSearchParams] = useSearchParams();

  return (
    <SearchParamsStateContext.Provider value={[searchParams, setSearchParams]}>
      {children}
    </SearchParamsStateContext.Provider>
  );
};

export function useSearchParamsState<T = string>(
  searchParamName: string,
  defaultValue: T
): readonly [
  searchParamsState: T,
  setSearchParamsState: (newState: T) => void
] {
  const [searchParams, setSearchParams] = useContext(SearchParamsStateContext);

  const acquiredSearchParam = searchParams.get(searchParamName);
  const searchParamsState = acquiredSearchParam
    ? decodeSearchParam(acquiredSearchParam)
    : defaultValue;

  const setSearchParamsState = (newState: T) => {
    setSearchParams(searchParams => {
      searchParams.set(searchParamName, JSON.stringify(newState))
      return searchParams;
    });
  };
  return [searchParamsState, setSearchParamsState];
}

export default SearchParamsStateProvider;

import SearchParamsStateProvider, {
  useSearchParamsState
} from "./searchParams.hooks";

...
<SearchParamsStateProvider>
  <Routes>
    <Route path="/" element={<Layout />}>
      <Route index element={<HomePage />}></Route>
    </Route>
  </Routes>
</SearchParamsStateProvider>

HomePage.tsx

const HomePage = () => {
  const [param1, setParam1] = useSearchParamsState("param1", "");
  const [param2, setParam2] = useSearchParamsState("param2", "");
  const [param3, setParam3] = useSearchParamsState("param3", "");

  const handleClick1 = () => {
    setParam1(1);
  };

  const handleClick2 = () => {
    setParam2(2);
    setParam3(3);
  };

  return (
    <div>
      <div>
        <h1>Home page</h1>
        <p>
          <button onClick={handleClick1}>Set param1</button>
        </p>
        <p>
          <button onClick={handleClick2}>Set param2 and param3</button>
        </p>
        <p>
          <b>list of params:</b> param1: {param1}, param2: {param2}, param3:{" "}
          {param3}
        </p>
      </div>
    </div>
  );
};