React中如何实现有效计算属性？解决复选框状态不更新问题

问题描述 #

开发带复选框的列表，数据项格式为{id, value}，每个项对应包含复选框和文本的div元素。选中项时将其id加入selectedItems数组，但复选框组件无法随selectedItems的变化更新状态，需要实现类似Vue计算属性的状态同步效果。

原代码问题分析 #

1. 错误初始化items：用useState初始化items会返回[状态值, 修改函数]的数组，后续取items[0]完全没必要，直接用普通常量存储静态数据即可。
2. useMemo依赖不全：useMemo的依赖数组只加了items，但复选框的checked状态依赖selectedItems，导致selectedItems变化时不会重新渲染列表，状态不同步。
3. 直接修改原状态数组：onChange中直接引用原selectedItems数组并修改（push/直接赋值），React无法检测到原数组的引用变化，不会触发组件更新。

修复后的代码 #

import { Checkbox } from "@mui/material";
import { useMemo, useState } from "react";

export default function Example() {
  // 直接用常量存储静态数据，无需useState
  const items = [{id: 0, value: "Item 1"}, {id: 1, value: "Item 2"}, {id: 2, value: "Item 3"}];
  const [selectedItems, setSelectedItems] = useState([]);

  function ListItems({ items }) {
    return useMemo(() => {
      return items.map(item => {
        // 用includes更简洁判断是否选中
        const checked = selectedItems.includes(item.id);
        return (
          <div key={item.id}>
            <Checkbox
              checked={checked}
              onChange={() => {
                setSelectedItems(prevState => {
                  // 基于前状态创建新数组，避免修改原状态
                  if (checked) {
                    return prevState.filter(id => id !== item.id);
                  } else {
                    return [...prevState, item.id];
                  }
                });
              }}
            />
            <p>{item.value}</p>
          </div>
        );
      });
    }, [items, selectedItems]); // 添加上selectedItems作为依赖
  }

  return (
    <div style={{display: "flex", flexDirection: "column"}}>
      <ListItems items={items}/>
    </div>
  );
}

关键改动说明 #

• 静态数据处理：items是静态数据，直接用常量定义，不需要用useState包裹，简化数据获取逻辑。
• 完善useMemo依赖：将selectedItems加入useMemo的依赖数组，确保selectedItems变化时重新计算列表元素，同步复选框状态。
• 不可变状态更新：使用函数式更新setSelectedItems(prevState => ...)，基于前状态创建新数组（扩展运算符[...prevState]或filter返回新数组），保证React能检测到状态变化，触发组件更新。
• 简化选中判断：用Array.includes()替代indexOf !== -1，代码更简洁易读。

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