React JS中复选框状态异常问题求助

核心问题 #

1. 状态变量未声明：PermissionsItem组件中注释掉了checkboxValue的状态初始化代码，导致组件无法正常维护复选框状态，属于基础语法错误。
2. 组件复用导致状态残留：Permissions渲染PermissionsItem时使用固定的权限ID作为key（比如"Post"的id始终是1），React会复用之前的组件实例，若状态同步逻辑有疏漏，就会出现旧状态残留的问题。

修复步骤 #

1. 修复PermissionsItem组件的状态声明与同步逻辑 #

补上状态变量初始化，确保组件正确接收初始权限值，同时在切换用户时（props.item.val变化）重置复选框状态：

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

const PermissionsItem = (props) => {
  // 初始化状态为当前用户的权限值
  const [checkboxValue, setCheckBoxValue] = useState(props.item.val);

  // 切换用户时，重置复选框状态为新用户的权限
  useEffect(() => {
    setCheckBoxValue(props.item.val);
  }, [props.item.val]);

  const checkBoxChangeHandler = (event) => {
    setCheckBoxValue(event.target.checked);
  };

  return (
    <div className="permission-item">
      <label htmlFor={props.item.id} className="perm-li">
        {props.item.name}
      </label>
      <input
        id={props.item.id}
        type="checkbox"
        checked={checkboxValue}
        onChange={checkBoxChangeHandler}
      />
    </div>
  );
};

export default PermissionsItem;

2. 优化App组件的权限计算（可选但推荐） #

用useMemo缓存permissions数组，避免每次渲染都重复创建，提升性能：

import { useState, useMemo } from "react";
import "./App.css";
import Dropdown from "./components/Dropdown";
import Permissions from "./components/Permissions";

function App() {
  const users = [
    { id: 1, name: "Cirilla", permissions: ["Post"] },
    { id: 2, name: "Michael Scofield", permissions: ["Post", "Fetch", "Write"] },
    { id: 3, name: "Thomas Shellby", permissions: [] },
    { id: 4, name: "Jon Snow", permissions: ["Fetch", "Post"] },
  ];
  const [currentUser, setCurrentUser] = useState(users[0]);

  // 仅当currentUser变化时重新计算权限数组
  const permissions = useMemo(() => [
    { id: 1, name: "Post", val: currentUser.permissions.includes("Post") },
    { id: 2, name: "Fetch", val: currentUser.permissions.includes("Fetch") },
    { id: 3, name: "Write", val: currentUser.permissions.includes("Write") },
    { id: 4, name: "Read", val: currentUser.permissions.includes("Read") },
  ], [currentUser]);

  const dropDownChangeHandler = (value) => {
    const user = users.find((item) => item.name === value);
    setCurrentUser(user);
  };

  console.log(currentUser);

  return (
    <div className="container">
      <Dropdown list={users} onChange={dropDownChangeHandler} />
      <Permissions list={permissions} />
    </div>
  );
}

export default App;

额外说明 #

如果需要支持修改权限并保存，要在checkBoxChangeHandler中添加逻辑，更新currentUser的permissions数组（注意不能直接修改原对象，需创建新对象触发React重新渲染）。

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