React项目中复选框选中值无法在已应用筛选区正常展示问题求助

问题根因 #

• 取消勾选时直接调用splice()修改了原isselected状态数组，React状态要求不可变更新，原地修改数组不会触发组件重渲染，所以页面上的已选筛选值不会同步更新
• 渲染已选值的map方法没有给子元素加唯一key属性，会触发React控制台警告
• label标签的htmlFor属性为空，点击文字无法关联选中对应复选框，交互体验有缺陷

修复后的完整代码 #

import React from "react";
import "./styles.css";
import { useState, useEffect } from "react";

export default function App() {
  const [isselected, setisselected] = useState([]);

  const OnChange = (e) => {
    const ischecked = e.target.checked;
    const currentValue = e.target.value;
    if (ischecked) {
      setisselected([...isselected, currentValue]);
    } else {
      // 用filter返回新数组，不修改原状态，符合React不可变更新要求
      setisselected(isselected.filter(item => item !== currentValue));
    }
  };

  useEffect(() => {
    console.log(isselected, "value selected");
  }, [isselected]);

  return (
    <div className="App">
      <span>
        已应用筛选:{" "}
        {isselected.map((i) => (
          <span key={i} style={{marginRight: '8px'}}>{i}</span>
        ))}
      </span>

      <div className="first-search">
        <input
          type="checkbox"
          className="input-1"
          value="Lastsevendays"
          name="last_seven"
          id="1"
          onChange={OnChange}
        />
        <label htmlFor="1">最近7天</label>
      </div>

      <div className="first-search">
        <input
          type="checkbox"
          className="input-1"
          name="last24"
          value="last_24"
          id="2"
          onChange={OnChange}
        />
        <label htmlFor="2">最近24小时</label>
      </div>
    </div>
  );
}

修复说明 #

• 取消勾选逻辑改用filter生成新数组，状态引用发生变化后会自动触发组件重渲染，已应用筛选区域会同步更新选中/取消的结果
• 给map生成的标签新增了唯一key属性，消除React运行时警告
• 补全了label的htmlFor属性，点击文字即可切换对应复选框的选中状态，优化了交互体验

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