小编Pau*_*sal的帖子

我已经setSearchParams在 Parent 组件中使用了 hook，它query根据inputJSX 元素的输入进行设置。现在，我需要实现第二个搜索参数 = 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({ …

这是我在函数组件中初始化的 useReducer 钩子。在listReducer函数中，我想创建用户==>我分配给状态用户类型的数组。所以，在有效负载中我必须有User[]. 但是，当我通过 _id 删除 ==> 仅其中单个元素时（必须使用私有变量来解决），我必须将字符串类型传递给有效负载。

type State = {
  list: User[];
}

const initialListState: State = {
  list: [],
};

enum ActionKind {
  CREATE = 'CREATE',
  DELETE = 'DELETE',
}

type Action = {
  type: ActionKind,
  payload: User[] | string;
}

function listReducer(state: State, action: Action): State {
  const { type, payload } = action;
  switch (type) {
    case ActionKind.CREATE:
      return { list: action.payload };
    case ActionKind.DELETE:
      return {
        list: state.list.filter((el) => el._id …