reactjs - React Router 6，同时处理多个搜索参数

Question

我已经在父组件中使用了 setSearchParams 钩子(Hook)，它根据 input JSX 元素的输入设置 query 。现在，我需要实现第二个搜索参数 = sortBy ，但不要删除已经存在的或可能是现有的 query 搜索参数，我需要在每次 If() 检查时执行。而且我现在还需要 if() 检查 sortBy 参数的父元素。我可能会在不同的 React 组件中引入更多的搜索参数 - 这会让代码变得困惑。

是否有更好的方法来使用 React Router 6 处理分散在项目中的多个搜索参数？

import { useSearchParams } from 'react-router-dom';

const titles = ['Name', 'Sex', 'Born', 'Died', 'Father', 'Mother', 'Slug'];

export const TableHead = () => {
  const [searchParams, setSearchParams] = useSearchParams();

  const query = searchParams.get('query');

  return (
    <tr className="person">
      {
        titles.map(el => (
          <th
            key={el}
            onClick={() => {
              if (query) {
                setSearchParams({ query, sortBy: el.toLowerCase() });
              } else {
                setSearchParams({ sortBy: el.toLowerCase() });
              }
            }}
          >
            {el}
          </th>
        ))
      }
    </tr>
  );
};

Answer 1

如果我理解您的问题/问题，您只想向现有查询字符串添加另一个查询参数。您可以更新当前的 searchParams 对象并使用它，而不是将搜索参数设置为全新的值。

示例:

export const TableHead = () => {
  const [searchParams, setSearchParams] = useSearchParams();

  const query = searchParams.get('query');

  return (
    <tr className="person">
      {titles.map(el => (
        <th
          key={el}
          onClick={() => {
            searchParams.set("sortBy": el.toLowerCase());
            setSearchParams(searchParams);
          }}
        >
          {el}
        </th>
      ))}
    </tr>
  );
};