React Router DOM导航中基于URL参数的筛选状态重置与同步

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

function SearchBar({ category }) {
  return (
    <Link to={{ pathname: '/products', search: `searchItem=${category.name}` }}>
      {category.name}
    </Link>
  );
}

import React, { useState } from 'react';
import { useSearchParams } from 'react-router-dom';

function Filters({ uniqueCategories }) {
  const [queryParams, setQueryParams] = useSearchParams();
  // 首次渲染时从URL中获取'categories'参数并初始化selectedCategories
  const [selectedCategories, setSelectedCategories] = useState(
    queryParams.get('categories')?.split(',') ?? []
  );

  const handleCategories = (category) => {
    // 处理复选框选中/取消选中逻辑
    if (selectedCategories.includes(category)) {
      setSelectedCategories(selectedCategories.filter((c) => c !== category));
    } else {
      setSelectedCategories([...selectedCategories, category]);
    }
    // 实际应用中，这里还会更新URL的'categories'查询参数
    // setQueryParams(prev => {
    //   const newParams = new URLSearchParams(prev);
    //   newParams.set('categories', updatedCategories.join(','));
    //   return newParams;
    // });
  };

  return (
    <div>
      {uniqueCategories.map((category, index) => (
        <div key={index} className="filter-type">
          <input
            type="checkbox"
            checked={selectedCategories.includes(category)}
            onChange={() => handleCategories(category)} // 使用onChange更符合标准
          />
          <div className="filter-item">{category}</div>
        </div>
      ))}
    </div>
  );
}

import React, { useState, useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';

function Filters({ uniqueCategories }) {
  const [queryParams, setQueryParams] = useSearchParams();
  const categoriesFromUrl = queryParams.get('categories'); // 从URL获取当前categories参数

  // 定义selectedCategories状态
  const [selectedCategories, setSelectedCategories] = useState(
    categoriesFromUrl?.split(',') ?? []
  );

  // 使用useEffect监听categoriesFromUrl的变化
  useEffect(() => {
    // 当categoriesFromUrl变化时，更新selectedCategories状态
    setSelectedCategories(categoriesFromUrl?.split(',') ?? []);
  }, [categoriesFromUrl]); // 依赖项数组中包含categoriesFromUrl

  const handleCategories = (category) => {
    let updatedCategories;
    if (selectedCategories.includes(category)) {
      updatedCategories = selectedCategories.filter((c) => c !== category);
    } else {
      updatedCategories = [...selectedCategories, category];
    }
    setSelectedCategories(updatedCategories); // 更新内部状态

    // 同时更新URL查询参数，以便页面刷新或分享时状态能保留
    setQueryParams(prev => {
      const newParams = new URLSearchParams(prev);
      if (updatedCategories.length > 0) {
        newParams.set('categories', updatedCategories.join(','));
      } else {
        newParams.delete('categories'); // 如果没有选中项，则移除参数
      }
      return newParams;
    }, { replace: true }); // 使用replace避免在历史记录中添加过多条目
  };

  return (
    <div>
      {uniqueCategories.map((category, index) => (
        <div key={index} className="filter-type">
          <input
            type="checkbox"
            checked={selectedCategories.includes(category)}
            onChange={() => handleCategories(category)}
          />
          <div className="filter-item">{category}</div>
        </div>
      ))}
    </div>
  );
}

import React, { useMemo } from 'react';
import { useSearchParams } from 'react-router-dom';

function Filters({ uniqueCategories }) {
  const [queryParams, setQueryParams] = useSearchParams();
  const categoriesFromUrl = queryParams.get('categories');

  // 使用useMemo直接从URL参数派生selectedCategories
  const selectedCategories = useMemo(() => {
    return categoriesFromUrl?.split(',') ?? [];
  }, [categoriesFromUrl]); // 只有当categoriesFromUrl变化时才重新计算

  const handleCategories = (category) => {
    let updatedCategories;
    if (selectedCategories.includes(category)) {
      updatedCategories = selectedCategories.filter((c) => c !== category);
    } else {
      updatedCategories = [...selectedCategories, category];
    }
    // 注意：这里不再有setSelectedCategories，直接通过setQueryParams更新URL
    setQueryParams(prev => {
      const newParams = new URLSearchParams(prev);
      if (updatedCategories.length > 0) {
        newParams.set('categories', updatedCategories.join(','));
      } else {
        newParams.delete('categories');
      }
      return newParams;
    }, { replace: true });
  };

  return (
    <div>
      {uniqueCategories.map((category, index) => (
        <div key={index} className="filter-type">
          <input
            type="checkbox"
            checked={selectedCategories.includes(category)}
            onChange={() => handleCategories(category)}
          />
          <div className="filter-item">{category}</div>
        </div>
      ))}
    </div>
  );
}