React电商筛选页CheckBox冲突：勾选品牌ID12时ID1、ID2同步被选中

问题现象 #

开发电商项目商品筛选页时，通过勾选复选框按品牌、分类筛选商品，选中状态会同步存入URL查询参数（示例格式：http://localhost:3000/product-list?categories=2&brands=1,12），实现页面刷新后保留选中状态。
当前异常：勾选ID为12的品牌复选框时，ID为1、ID为2的品牌复选框会被自动同步选中。

原组件代码 #

import React from "react";
import "./CheckBox.style.scss";
import { withRouter } from "react-router-dom";

class CheckBox extends React.Component {
  constructor(props) {
    super(props);
    this.checkboxRef = React.createRef();
  }

  componentDidUpdate(prevProps) {
    if (
      this.props.location.search !== prevProps.location.search &&
      this.checkCategoryChanges(
        this.props.location.search,
        prevProps.location.search
      ) &&
      this.checkboxRef.current.checked
    ) {
      this.checkboxRef.current.checked = false;
    }
  }

  checkCategoryChanges(currentUrl, prevUrl) {
    let items =
      currentUrl.charAt(0) === "?"
        ? currentUrl.slice(1).split("&")
        : currentUrl.split("&");

    for (const item of items) {
      if (
        (item.indexOf("categories") !== -1 && prevUrl.indexOf(item) === -1) ||
        (item.indexOf("categories") !== -1 && items.length === 1)
      ) {
        return true;
      }
    }
    return false;
  }

  isChecked() {
    const mainUrlAsArray = window.location.href.split("?");
    if (mainUrlAsArray.length === 2) {
      const url = mainUrlAsArray[1];
      let checkedItems =
        url.charAt(0) === "?" ? url.slice(1).split("&") : url.split("&");

      for (const item of checkedItems) {
        if (
          item.indexOf(this.props.urlKey) !== -1 &&
          item.split("=")[1].indexOf(this.props.value) !== -1
        ) {
          return true;
        }
      }
      return false;
    }
  }

  runOnChange(e) {
    const checkboxData = {
      value: this.props.value,
      urlKey: this.props.urlKey,
      isChecked: e.target.checked,
      type: this.props.type ? this.props.type : "checkbox",
    };
    this.props.onChange(checkboxData);
  }

  render() {
    return (
      <label className="checkbox-group">
        <input
          ref={this.checkboxRef}
          defaultChecked={this.isChecked() ? true : undefined}
          value={this.props.value}
          onClick={(e) => this.runOnChange(e)}
          type={this.props.type ? this.props.type : "checkbox"}
          className="checkbox"
          name={this.props.name}
        />
        <span className="checkBoxLabel">{this.props.text}</span>
      </label>
    );
  }
}

export default withRouter(CheckBox);

问题根因 #

核心bug出在isChecked方法的匹配逻辑：

• 直接用indexOf做字符串包含判断，没有按逗号拆分参数值为列表项做精确匹配
• 当品牌参数值为12时，判断ID为1的复选框时，"12".indexOf("1")返回0（匹配到字符串首位的1），判断ID为2的复选框时，"12".indexOf("2")返回1（匹配到字符串第二位的2），导致两个复选框都被判定为已选中。

其他衍生问题：

• 组件使用defaultChecked非受控模式，DOM状态和URL逻辑状态不同步时容易出现异常
• 手动拆分URL字符串的解析逻辑容错性差，容易被参数顺序、特殊字符干扰
• 直接操作DOM修改checked属性，和React的状态渲染逻辑冲突

修复方案 #

1. 重写isChecked方法 #

使用浏览器原生的URLSearchParamsAPI解析参数，按逗号拆分值列表后做精确匹配，避免字符串包含误判：

isChecked() {
  // 解析当前URL的查询参数
  const searchParams = new URLSearchParams(window.location.search);
  // 获取当前urlKey对应的参数值，拆分后得到已选中的值数组
  const selectedValues = searchParams.get(this.props.urlKey)?.split(",") || [];
  // 转成统一字符串类型做精确匹配，避免数字/字符串类型不匹配
  return selectedValues.includes(String(this.props.value));
}

2. 改为受控组件模式 #

将defaultChecked替换为checked属性，完全由URL状态驱动复选框的选中状态，删除手动操作DOM的逻辑：

render() {
  return (
    <label className="checkbox-group">
      <input
        checked={this.isChecked()}
        value={this.props.value}
        onClick={(e) => this.runOnChange(e)}
        type={this.props.type ? this.props.type : "checkbox"}
        className="checkbox"
        name={this.props.name}
      />
      <span className="checkBoxLabel">{this.props.text}</span>
    </label>
  );
}

3. 简化生命周期逻辑 #

原有的componentDidUpdate方法中手动修改DOMchecked属性的逻辑可以完全移除，现在组件为受控模式，URL变化时会自动触发重渲染更新选中状态：

// 整个componentDidUpdate方法可直接删除

4. 优化分类变更的判断逻辑 #

如果原有业务为切换分类时清空品牌选中项，可以基于URLSearchParams简化checkCategoryChanges的判断逻辑：

checkCategoryChanges(currentSearch, prevSearch) {
  const currentParams = new URLSearchParams(currentSearch);
  const prevParams = new URLSearchParams(prevSearch);
  // 仅判断分类参数是否发生变化
  return currentParams.get("categories") !== prevParams.get("categories");
}

注意：父组件更新URL参数时，要统一将选中值存为字符串类型的数组，拼接时自动过滤空值，避免出现,12、1,这类无效参数格式。

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