React中如何通过复选框正确移除数组元素？

问题描述 #

正在开发React随机问题卡片项目，希望添加配置选项让用户在开始前选择要玩的问题，但当前筛选逻辑异常：勾选5个选项时所有卡片被删除，勾选1个选项时只剩1个卡片，无法实现保留未勾选问题的预期效果。

现有代码 #

App.js #

const [checkedOrange1, setCheckedOrange1] = useState(false)
const handleChangeOrange1 = () => {
  setCheckedOrange1(!checkedOrange1)
}
const [checkedOrange2, setCheckedOrange2] = useState(false)
const handleChangeOrange2 = () => {
  setCheckedOrange2(!checkedOrange2)
}
const [checkedOrange3, setCheckedOrange3] = useState(false)
const handleChangeOrange3 = () => {
  setCheckedOrange3(!checkedOrange3)
}
const [checkedOrange4, setCheckedOrange4] = useState(false)
const handleChangeOrange4 = () => {
  setCheckedOrange4(!checkedOrange4)
}
const [checkedOrange5, setCheckedOrange5] = useState(false)
const handleChangeOrange5 = () => {
  setCheckedOrange5(!checkedOrange5)
}
const [checkedOrange6, setCheckedOrange6] = useState(false)
const handleChangeOrange6 = () => {
  setCheckedOrange6(!checkedOrange6)
}

// 渲染部分
<div>
  Question 1
  <input type="checkbox" onChange={handleChangeOrange1} />
  Question 2
  <input type="checkbox" onChange={handleChangeOrange2} />
  Question 3
  <input type="checkbox" onChange={handleChangeOrange3} />
  Question 4
  <input type="checkbox" onChange={handleChangeOrange4} />
  Question 5
  <input type="checkbox" onChange={handleChangeOrange5} />
  Question 6
  <input type="checkbox" onChange={handleChangeOrange6} />
</div>

问题卡片组件 #

let Arrayorange = [
  { question: "Question 1", id: 1 },
  { question: "Question 2", id: 2 },
  { question: "Question 3", id: 3 },
  { question: "Question 4", id: 4 },
  { question: "Question 5", id: 5 },
  { question: "Question 6", id: 6 }
];

const [question, setQuestion] = React.useState(Arrayorange);
const [randomCard, setRandomCard] = React.useState({condicion:'start'});

// 错误的筛选逻辑
if(stateorange1 === true){
  let idorange1 = 1;
  let index = question.findIndex(item => item.id === idorange1);
  question.splice(index, 1)
}
if(stateorange2 === true){
  let idorange2 = 2;
  let index = question.findIndex(item2 => item2.id === idorange2);
  question.splice(index, 1)
}
if(stateorange3 === true){
  let idorange3 = 3;
  let index = question.findIndex(item3 => item3.id === idorange3);
  question.splice(index, 1)
}
if(stateorange4 === true){
  let idorange4 = 4;
  let index = question.findIndex(item4 => item4.id === idorange4);
  question.splice(index, 1)
}
if(stateorange5 === true){
  let idorange5 = 5;
  let index = question.findIndex(item5 => item5.id === idorange5);
  question.splice(index, 1)
}
if(stateorange6 === true){
  let idorange6 = 6;
  let index = question.findIndex(item6 => item6.id=== idorange6);
  question.splice(index, 1)
}

问题分析 #

1. 直接修改State数组：使用splice直接修改question状态数组，违反React状态不可变原则，导致状态更新异常，组件无法正确追踪状态变化。
2. 重复执行删除逻辑：每次组件渲染时都会执行所有if判断的删除操作，即使目标问题已经被删除，findIndex返回-1时，splice(-1, 1)会删除数组最后一个元素，最终导致所有问题被误删。
3. 冗余的状态管理：使用6个独立的状态变量管理复选框状态，代码冗余且难以维护。

解决方案 #

步骤1：重构App.js的状态与渲染逻辑 #

将多个独立的复选框状态合并为一个数组，存储需要排除的问题ID，并使用循环渲染复选框：

import { useState } from 'react';

// 抽离问题列表为常量
const QUESTIONS = [
  { question: "Question 1", id: 1 },
  { question: "Question 2", id: 2 },
  { question: "Question 3", id: 3 },
  { question: "Question 4", id: 4 },
  { question: "Question 5", id: 5 },
  { question: "Question 6", id: 6 }
];

function App() {
  // 用数组存储需要排除的问题ID
  const [excludedIds, setExcludedIds] = useState([]);

  // 通用的复选框变更处理函数
  const handleCheckboxChange = (id) => {
    setExcludedIds(prev => {
      if (prev.includes(id)) {
        // 已选中则移除
        return prev.filter(item => item !== id);
      } else {
        // 未选中则添加
        return [...prev, id];
      }
    });
  };

  return (
    <div>
      {QUESTIONS.map(item => (
        <div key={item.id}>
          {item.question}
          <input
            type="checkbox"
            checked={excludedIds.includes(item.id)}
            onChange={() => handleCheckboxChange(item.id)}
          />
        </div>
      ))}
      {/* 将排除的ID传递给问题卡片组件 */}
      <QuestionCard excludedIds={excludedIds} />
    </div>
  );
}

步骤2：修复问题卡片组件的筛选逻辑 #

遵循不可变原则，通过过滤原始数组得到需要保留的问题，避免直接修改状态：

import { useState, useMemo } from 'react';

const QUESTIONS = [
  { question: "Question 1", id: 1 },
  { question: "Question 2", id: 2 },
  { question: "Question 3", id: 3 },
  { question: "Question 4", id: 4 },
  { question: "Question 5", id: 5 },
  { question: "Question 6", id: 6 }
];

function QuestionCard({ excludedIds }) {
  const [randomCard, setRandomCard] = useState({ condicion: 'start' });

  // 使用useMemo缓存过滤后的问题列表，避免重复计算
  const filteredQuestions = useMemo(() => {
    // 保留未被勾选排除的问题
    return QUESTIONS.filter(item => !excludedIds.includes(item.id));
  }, [excludedIds]);

  // 随机卡片逻辑可基于filteredQuestions实现
  const getRandomCard = () => {
    if (filteredQuestions.length === 0) return;
    const randomIndex = Math.floor(Math.random() * filteredQuestions.length);
    setRandomCard(filteredQuestions[randomIndex]);
  };

  return (
    <div>
      <button onClick={getRandomCard}>获取随机问题</button>
      {randomCard.condicion !== 'start' && (
        <div className="card">{randomCard.question}</div>
      )}
    </div>
  );
}

优化说明 #

• 状态聚合：用单个数组管理复选框选中状态，代码更简洁易维护。
• 不可变操作：通过filter和扩展运算符生成新数组，符合React状态更新规范。
• 性能优化：使用useMemo缓存过滤后的问题列表，减少不必要的重复计算。
• 逻辑清晰：明确区分原始问题列表、选中排除的ID和过滤后的有效问题，避免状态混乱。

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