Preserving Previous Filters and Adding New Filters in React/Next.js Data Filtering

I'm currently trying to filter data using React/Next.js, but I'm facing an issue. When I set a new filter, the previous ones are being removed. For example, if the user performs a search, it works fine, but the tag filters are removed from the URL.

What I would like is to preserve the previous filters and add or update a new filter if it's already set up. For example, the URL could be: localhost:3000/?search=text&tag=food.

My search input code:

import React, { useState } from "react";
import { XMarkIcon } from "@heroicons/react/24/outline";

export default function Search({ useRouter, search }) {
  const [searchQuery, setSearchQuery] = useState(search);
  const { push } = useRouter();

  const handleInputChange = (e) => {
    setSearchQuery(e.target.value);
    push("/?search=" + e.target.value);
  };

  const cleanSearch = (e) => {
    e.preventDefault();
    setSearchQuery("");
    push("/?search=");
  };

return (..................
          <input
            type="search"
            id="default-search"
            className="block w-full rounded-lg border border-slate-300 bg-slate-50 p-4 pl-10 text-sm  placeholder-slate-400 focus:border-blue-500 focus:ring-blue-500"
            placeholder="Search AI tool or category"
            required
            value={searchQuery}
            onChange={handleInputChange}
          />
    ................);}

My filter component :

"use client";
import React from "react";
import Search from "../common/search";
import Selector from "../common/selector";
import { useRouter } from "next/navigation";

export default function Filters({ tags, prices, search }) {
  return (
    <div className="mb-5 flex w-full grid-cols-4 flex-col gap-3 text-center text-base font-medium text-slate-700 md:grid">
      <Search
        className="col-span-2 w-full"
        search={search}
        useRouter={useRouter}
      />
      <Selector label="Category" data={tags} useRouter={useRouter} />
      <Selector label="Price" data={prices} useRouter={useRouter} />
    </div>
  );
}

What I tried to add in the search component instead of pushing directly was:

  const handleInputChange = (e) => {
    setSearchQuery(e.target.value);
    updateQueryParams({ search: e.target.value });
  };

const updateQueryParams = (newParams) => {
  const existingQueryParams = { ...router.query };
  const updatedQueryParams = { ...existingQueryParams, ...newParams };

  let queryString = router.pathname; // Initialize with router.pathname

  const queryKeys = Object.keys(updatedQueryParams);
  if (queryKeys.length > 0) {
    const queryArray = queryKeys.map((key) => `${key}=${updatedQueryParams[key]}`);
    queryString += `?${queryArray.join("&")}`;
  }

  router.push(queryString);
};```


</details>


# 答案1
**得分**: 0

Your problem is you're just using the last e.target.value for the new search parameter.

Instead of

```javascript
const handleInputChange = (e) => {
  setSearchQuery(e.target.value);
  push("/?search=" + e.target.value);
};

Try making your searchQuery an array and go with something more like this:

const handleInputChange = (e) => {
  setSearchQuery((oldSearch) => [...oldSearch, e.target.value]);
  push("/?search=" + searchQuery.join('&'));
};

const handleInputChange = (e) => {
setSearchQuery(e.target.value);
push("/?search=" + e.target.value);
};

const handleInputChange = (e) => {
setSearchQuery((oldSearch) => {[...oldSearch, e.target.value]);
push("/?search=" + searchQuery.join('&');
};