React中多复选框筛选如何实现初始展示全量数据再显示筛选结果

解决方案 #

你当前的核心问题是状态设计冗余，且没有对「无筛选条件」的场景做判断。我们可以通过单独存储选中的筛选条件、动态计算展示列表的方式解决需求，同时修复现有代码中的语法错误。

修改点说明

1. 新增存储选中品牌的状态，删除冗余的filteredData状态，避免多状态不同步问题
2. 调整复选框交互逻辑，仅维护选中的品牌列表
3. 动态计算最终展示列表：无选中项时直接返回接口全量数据，有选中项时返回筛选结果
4. 修复原有代码中的属性名错误、变量未定义、渲染逻辑缺失等问题

修改后完整代码

import React, { useState, useEffect } from "react";

export default function CarsMain() {
  const [filterList] = useState([
    { value: "BMW" },
    { value: "Hyundai" },
    { value: "Mercedes" }
  ]);
  const [data, setData] = useState([]);
  // 存储当前选中的品牌列表
  const [selectedBrands, setSelectedBrands] = useState([]);

  useEffect(() => {
    // 替换为实际接口地址
    const url = "your_api_url";
    fetch(url)
      .then(function (response) {
        return response.json();
      })
      .then(function (res) {
        setData(res);
      })
      .catch(function (e) {
        console.log(e);
      });
  }, []);

  function handleCheckbox(value, e) {
    if (e.target.checked) {
      // 选中时添加品牌到列表
      setSelectedBrands([...selectedBrands, value]);
    } else {
      // 取消选中时从列表移除品牌
      setSelectedBrands(selectedBrands.filter(item => item !== value));
    }
  }

  // 动态计算展示列表
  const displayList = selectedBrands.length === 0 
    ? data 
    : data.filter(car => selectedBrands.includes(car.model));

  return (
    <div>
      {/* 复选框区域 */}
      <div>
        {filterList?.map((v) => {
          return (
            <div key={v.value}>
              <input
                type="checkbox"
                onChange={(e) => handleCheckbox(v.value, e)}
                checked={selectedBrands.includes(v.value)}
              />
              <label>{v.value}</label>
            </div>
          );
        })}
      </div>
      {/* 汽车列表渲染区域 */}
      <div>
        {displayList.map((d) => <div key={d.id}>{d.model}</div>)}
      </div>
    </div>
  );
}

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