React Router函数未接收props，房屋筛选功能无响应求助

你的代码存在几个关键问题导致筛选条件修改后无反应：

1. 错误操作setSearchParams #

setSearchParams是React Router提供的函数，不是普通对象，不能用setSearchParams[item.name] = item.value这种赋值语法修改查询参数。必须通过调用函数的方式更新，或者先创建当前查询参数的副本再修改。

2. navigate参数格式错误 #

React Router的navigate函数接收的跳转对象中，查询参数对应的属性是search，而非query。你之前传递的query变量只是单个查询字段的值，不是完整的查询参数集合，导致导航时没有携带筛选条件。

3. 未确认getFilterValues的返回值 #

如果getFilterValues(filterValues)没有返回预期的格式（比如空数组），后续的循环逻辑不会执行，也无法更新查询参数。建议先打印返回值确认是否符合预期。

修复后的代码 #

import classes from "./FilterProperties.module.css";

import { useState } from "react";
import { filterData, getFilterValues } from "../../lib/filterData";
import { useLocation, useSearchParams, useNavigate } from "react-router-dom";

import DropDown from "./DropDown";

const FilterProperties = () => {
  const location = useLocation();
  const [filters, setFilters] = useState(filterData);
  const [searchParams, setSearchParams] = useSearchParams();
  const navigate = useNavigate();

  const searchProperties = (filterValues) => {
    const path = location.pathname;
    // 创建当前查询参数的副本，避免直接修改原对象
    const newSearchParams = new URLSearchParams(searchParams);
    
    const values = getFilterValues(filterValues);
    console.log(values); // 确认该函数返回值是否符合预期

    values.forEach((item) => {
      if (item.value) {
        // 设置筛选参数
        newSearchParams.set(item.name, item.value);
      } else {
        // 值为空时移除该参数，避免无效参数堆积
        newSearchParams.delete(item.name);
      }
    });

    // 调用setSearchParams直接更新URL查询参数
    setSearchParams(newSearchParams);
  };

  return (
    <div className={classes.item}>
      {filters.map((filter) => (
        <DropDown
          key={filter.queryName}
          placeholder={filter.placeholder}
          filter={filter}
          onChange={(e) => {
            // 注意：如果DropDown是自定义组件，onChange可能直接返回值而非事件对象，需调整为(value) => ...
            searchProperties({ [filter.queryName]: e.target.value });
          }}
        />
      ))}
    </div>
  );
};

export default FilterProperties;

额外检查点 #

• 确认DropDown组件的onChange回调是否正确传递值：如果是自定义下拉组件，可能直接返回选中的值而非事件对象，此时需要把e.target.value改成value。
• 验证getFilterValues函数的返回值是否为[{name: 'xxx', value: 'xxx'}, ...]格式，确保循环能正确执行。

内容的提问来源于stack exchange，提问作者Daksh Shah