如何利用URL查询参数实现页面重载时保持复选框勾选状态

问题根源分析 #

1. 类型不匹配：queryParams.get('discount')返回的是字符串类型（比如"30"），而你的discountOption是数字类型（比如30），直接用===全等比较会返回false，导致复选框无法正确选中。
2. 状态未同步初始化：页面重载时，组件本地状态和父组件传入的discount没有从queryParams同步，初始渲染时状态和URL参数不一致。
3. 操作未同步URL参数：之前的handleChange只更新了父组件状态，没有同步修改URL的queryParams，虽然重载后URL有参数，但组件初始渲染时没有正确读取并应用。

代码修改方案 #

以下是调整后的完整代码，包含类型转换、状态同步和URL参数同步逻辑：

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

function FilterDiscounts({ discount, handleDiscounts }) {
    const discountsList = Array.from({ length: 9 }, (_, index) => (index + 1) * 10);
    const [queryParams, setQueryParams] = useSearchParams();
    // 将queryParams中的discount转为数字，无值时设为null
    const discountFromQueryParams = queryParams.get('discount') ? Number(queryParams.get('discount')) : null;

    // 监听queryParams变化，同步状态到父组件
    useEffect(() => {
        if (discountFromQueryParams !== null && discountFromQueryParams !== discount) {
            handleDiscounts(discountFromQueryParams);
        } else if (discountFromQueryParams === null && discount !== null) {
            handleDiscounts(null);
        }
    }, [discountFromQueryParams, discount, handleDiscounts]);

    const handleChange = (discountValue) => {
        const isCurrentlyChecked = discountValue === discount || discountValue === discountFromQueryParams;
        if (isCurrentlyChecked) {
            // 取消勾选：清空父组件状态和URL参数
            handleDiscounts(null);
            queryParams.delete('discount');
            setQueryParams(queryParams);
        } else {
            // 勾选：设置父组件状态和URL参数
            handleDiscounts(discountValue);
            queryParams.set('discount', discountValue.toString());
            setQueryParams(queryParams);
        }
    };

    return (
        <Row>
            <h6>DISCOUNT RANGE</h6>
            {discountsList.map((discountOption, index) => (
                <div key={index} className="filter-type">
                    <input
                        type="checkbox"
                        checked={discountOption === discount || discountOption === discountFromQueryParams}
                        onChange={() => handleChange(discountOption)}
                    />
                    <div className="filter-item">{discountOption}% and above</div>
                </div>
            ))}
        </Row>
    );
}

关键修改点说明 #

• 类型转换：通过Number()将queryParams获取的字符串转为数字，保证和discountOption的数字类型一致，解决全等比较失败的问题。
• useEffect同步：监听discountFromQueryParams的变化，在组件挂载或URL参数变更时，自动同步父组件的discount状态，确保初始渲染时状态和URL参数一致。
• URL参数同步：在handleChange中，通过setQueryParams修改URL参数，保证用户操作后URL和状态同步，重载时能正确读取参数。

简化版本（可选） #

如果不需要单独的状态变量，可以直接通过当前参数判断勾选状态，进一步简化代码：

// 去掉额外状态，直接在handleChange中判断
const handleChange = (discountValue) => {
    const isChecked = discountValue === discount || discountValue === discountFromQueryParams;
    handleDiscounts(isChecked ? null : discountValue);
    isChecked ? queryParams.delete('discount') : queryParams.set('discount', discountValue.toString());
    setQueryParams(queryParams);
};

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