React复选框过滤器异常问题及通用过滤组件实现咨询

一、修复取消复选框时数组清空的bug #

问题根源在于ContentFormat组件中fileTypeArray是每次渲染都会重置的局部变量，而非持久化状态，导致取消选择时无法基于之前的选中状态过滤。修复方式是将其改为组件内部状态：

修改后的ContentFormat组件 #

import { useState } from 'react';

export default function ContentFormat(props) {
  const [isDisplay, setIsDisplay] = useState(false);
  // 改为状态，初始值从父组件传入，支持回显已选值
  const [selectedItems, setSelectedItems] = useState(props.initialValue || []);
  const array = ["HTML", "PDF"];

  const toggle = () => {
    setIsDisplay(!isDisplay);
  };
  
  const handleSelection = (event) => {
    const value = event.target.value;
    setSelectedItems(prev => {
      if (event.target.checked) {
        // 选中时添加，避免重复
        return [...new Set([...prev, value])];
      } else {
        // 取消时移除对应值
        return prev.filter(item => item !== value);
      }
    });
  };

  const applyClickHandler = () => {
    props.onChange(selectedItems);
  };

  return (
    <div>
      <DropContent>
        <DropButton onClick={toggle}>
          {" "}
          <P text="By Content Format" fontSize="14px" color="#454545"></P>
          <KeywordImg src={droparrow} />
        </DropButton>
        <ContextWrapper style={{ display: isDisplay ? "none" : "block" }}>
          <P
            text="Filter by Extension types"
            fontSize="18px"
            color="#ACACAC"
            textAlign="center"
            padding="22px 32px 14px"
          ></P>
          <DropScroll className="sl-style-3">
            {array.map((item, index) => {
              return (
                <ContextItem key={index}>
                  <DropList
                    onHandleSelection={handleSelection}
                    text={item}
                    value={item}
                    // 回显选中状态
                    checked={selectedItems.includes(item)}
                  ></DropList>
                </ContextItem>
              );
            })}
          </DropScroll>
          <ApplyButton onClick={applyClickHandler}>
            <P text="Apply" fontSize="16px" color="#fff" textAlign="center"></P>
          </ApplyButton>
        </ContextWrapper>
      </DropContent>
    </div>
  );
}

对应修改DropList组件，支持传入checked状态 #

export default function DropList(props) {
  const changeHandler = (e) => {
    props.onHandleSelection(e);
  };

  return (
    <div>
      <div className="">
        <TickBox
          type="checkbox"
          id={props.id}
          name={props.name}
          value={props.value}
          checked={props.checked}
          onChange={(e) => {
            changeHandler(e);
          }}
        />
        {props.text}
      </div>
    </div>
  );
}

父组件调用时传入初始值 #

// Data父组件中修改调用
<ContentFormat
  onChange={handleFileType}
  initialValue={fileType}
></ContentFormat>

二、实现通用过滤组件，统一处理5个过滤器 #

目前每个过滤器都需要单独写组件、维护状态和处理函数，重复代码过多。可以通过统一状态管理+通用过滤组件优化：

1. 父组件统一管理过滤状态 #

将多个分散的state合并为一个filters对象，减少重复逻辑：

export default function Data(props) {
  // 统一所有过滤条件到一个state
  const [filters, setFilters] = useState({
    domain: [],
    fileType: [],
    entity: ["Patents"],
    year: {},
    keywords: []
  });
  const [results, setResults] = useState([]);

  // 统一的过滤条件变更处理函数
  const handleFilterChange = (fieldName, value) => {
    setFilters(prev => ({
      ...prev,
      [fieldName]: value
    }));
  };

  // 调用API的逻辑不变，从filters中取值
  useEffect(() => {
    const fetchResults = async (projectid) => {
      const url = props.apiURL.rpaapiurl + "/search";
      const resultsObj = {
        projectId: projectid,
        filter: {
          domain: filters.domain,
          fileType: filters.fileType,
          entity: filters.entity,
        },
      };

      const response = await fetch(url, {
        method: "POST",
        body: JSON.stringify(resultsObj),
        headers: {
          "Content-Type": "application/json",
        },
      });
      const data = await response.json();
      setResults(data);
    };
    fetchResults(5);
  }, [filters.domain, filters.fileType, filters.entity]);

  return (
    <>
      <Item1>
        <Dropdown 
          filters={filters}
          onFilterChange={handleFilterChange}
        ></Dropdown>
      </Item1>
      <Item2>
        <Table
          Data={results}
          Attributes={resultTable}
          entitytypeHandler={props.entitytypeHandler}
        ></Table>
      </Item2>
    </>
  );
}

2. 编写通用过滤组件GenericFilterDropdown #

将ContentFormat改造成通用组件，通过props传入不同过滤器的配置：

import { useState } from 'react';

export default function GenericFilterDropdown(props) {
  const { title, options, fieldName, currentValue, onChange } = props;
  const [isDisplay, setIsDisplay] = useState(false);
  // 临时状态保存选中值，点击Apply再提交给父组件
  const [tempSelected, setTempSelected] = useState(currentValue);

  const toggle = () => {
    setIsDisplay(!isDisplay);
  };
  
  const handleSelection = (event) => {
    const value = event.target.value;
    const newSelected = event.target.checked 
      ? [...new Set([...tempSelected, value])]
      : tempSelected.filter(item => item !== value);
    setTempSelected(newSelected);
  };

  const applyClickHandler = () => {
    onChange(fieldName, tempSelected);
    setIsDisplay(false); // 点击Apply后收起下拉
  };

  return (
    <div>
      <DropContent>
        <DropButton onClick={toggle}>
          <P text={title} fontSize="14px" color="#454545"></P>
          <KeywordImg src={droparrow} />
        </DropButton>
        <ContextWrapper style={{ display: isDisplay ? "none" : "block" }}>
          <P
            text={`Filter by ${title}`}
            fontSize="18px"
            color="#ACACAC"
            textAlign="center"
            padding="22px 32px 14px"
          ></P>
          <DropScroll className="sl-style-3">
            {options.map((item, index) => {
              return (
                <ContextItem key={index}>
                  <DropList
                    onHandleSelection={handleSelection}
                    text={item}
                    value={item}
                    checked={tempSelected.includes(item)}
                  ></DropList>
                </ContextItem>
              );
            })}
          </DropScroll>
          <ApplyButton onClick={applyClickHandler}>
            <P text="Apply" fontSize="16px" color="#fff" textAlign="center"></P>
          </ApplyButton>
        </ContextWrapper>
      </DropContent>
    </div>
  );
}

3. 修改中间Dropdown组件，使用通用组件 #

export default function Dropdown(props) {
  const { filters, onFilterChange } = props;
  // 定义各个过滤器的配置
  const filterConfigs = [
    {
      fieldName: 'domain',
      title: 'By Domain',
      options: ['Domain1', 'Domain2', 'Domain3'] // 替换为实际选项
    },
    {
      fieldName: 'fileType',
      title: 'By Content Format',
      options: ['HTML', 'PDF']
    },
    {
      fieldName: 'entity',
      title: 'By Entity',
      options: ['Patents', 'Trademarks', 'Copyrights']
    },
    // 其他三个过滤器的配置...
  ];

  return (
    <FilterItem>
      <Input
        type="search"
        placeholder="Search in title, description, keywords"
        onChange={(e) => {
          // 处理搜索关键词，直接更新filters
          onFilterChange('keywords', [e.target.value]);
        }}
      ></Input>
      
      {filterConfigs.map(config => (
        <GenericFilterDropdown
          key={config.fieldName}
          fieldName={config.fieldName}
          title={config.title}
          options={config.options}
          currentValue={filters[config.fieldName]}
          onChange={onFilterChange}
        />
      ))}

      <TextWrap>
        <P text="End year" fontSize="14px" color="#454545"></P>
        <KeywordImg src={droparrow} />
      </TextWrap>
    </FilterItem>
  );
}

优化说明 #

1. 状态持久化：将过滤器选中状态改为组件内部state，解决取消选择时数组清空的问题，同时支持回显已选值。
2. 统一逻辑：通过通用过滤组件+统一状态管理，避免重复编写多个过滤器组件，后续新增或修改过滤器仅需调整配置即可，维护成本大幅降低。
3. 可扩展性：通用组件支持自定义标题、选项、对应字段，适配不同类型的多选过滤器需求。

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