Reactjs React Router 6，一次处理多个搜索参数

发布于08月06日

我已经在父组件中使用了setSearchParams钩子，它根据来自input JSX元素的输入设置query.现在，我需要实现第二个搜索参数=sortBy，但不是擦除已经存在的或可能是现有的query个搜索参数，我每次都需要执行if()chech. 我现在还需要if()签入sortBy个参数的父元素.我可能会在不同的Reaction组件中引入更多的搜索参数--这会使代码变得混乱.

有没有更好的方法来处理分散在您的项目中的多个搜索参数？

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

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

Reactjs React Router 6，一次处理多个搜索参数

推荐答案

Reactjs相关问答推荐

如何使用next.js以DOM为目标在映射中使用Ref

单击按钮时在子元素中不显示任何内容-react

在Next.js中实现动态更改的服务器组件

React Context未正确更新

为什么我得不到我想要的数据？

使用VITE的Reaction应用程序的配置是否正确？

状态改变不会触发重新渲染

如何在 React Native 中渲染下面的对象数组？

将 useRef 与 useImperativeHandle 一起使用时，React 不会重新渲染

为 Next.js 应用程序目录中的所有页面添加逻辑的全局文件是什么？

使用 MuiCssBaseline 在所有 MUI v5 标签上设置边距 0

使用状态与复选框不同步

添加 React/Redux 组件模板的 VS Code 扩展

当用户输入相同信息时如何禁用更新

使用 yarn 编译 protobuf js 时出现错误pbjs： command not found

在 redux 工具包中使用 dispatch 发送多个操作

React Hooks 表单在日志(log)中显示未定义的用户名

React LinkProps 的含义

如何在按钮左下角制作 Material UI 菜单下拉菜单

react-three-fiber 场景背景比原图更亮