React中如何根据API返回数据设置复选框的选中状态？

要实现根据categories状态设置对应复选框的选中状态，核心是匹配两个数组中的id字段——因为category里的tv和data里的television共享同一个id: abcd3，用id判断比名称更可靠（避免名称不一致的问题）。

步骤1：优化匹配性能（可选但推荐） #

如果直接在checked属性里遍历categories查找匹配，数据量大时会重复执行遍历逻辑，影响性能。可以用useMemo提前生成一个存储已选中ID的集合：

import { useState, useMemo } from 'react';

// ...其他代码

const selectedCategoryIds = useMemo(() => {
  // 从categories状态中提取所有id存入Set
  return new Set(categories.map(item => item.id));
}, [categories]); // 仅当categories状态更新时重新生成集合

步骤2：设置复选框的checked属性 #

在渲染每个category项时，用当前项的id去selectedCategoryIds集合中查找，存在则设为true，否则为false。同时修正原代码里的语法错误（比如label的写法、缺少key属性等）：

完整修正代码 #

import { useState, useMemo, useEffect } from 'react';

function YourComponent() {
  const [categories, setCategories] = useState([]);
  
  // 注意：原代码中id和name需为字符串，否则会触发语法错误
  const category = [
    { id: "abcd1", name: "phone" },
    { id: "abcd2", name: "computer" },
    { id: "abcd3", name: "tv" },
  ];

  const data = [
    { id: "abcd3", name: "television" }
  ];

  // 初始化设置状态
  useEffect(() => {
    setCategories(data);
  }, []);

  const selectedCategoryIds = useMemo(() => {
    return new Set(categories.map(item => item.id));
  }, [categories]);

  return (
    <div>
      {category.map((item) => (
        <div key={item.id}> {/* 必须添加唯一key，避免React渲染警告 */}
          <input
            type="checkbox"
            checked={selectedCategoryIds.has(item.id)} // 核心判断逻辑
          />
          <label>{item.name}</label>
        </div>
      ))}
    </div>
  );
}

export default YourComponent;

关键说明 #

• Set的has()方法时间复杂度为O(1)，比数组的find()/some()的O(n)更高效，适合数据量较大的场景。
• useMemo会缓存ID集合，只有当categories状态变化时才重新计算，避免不必要的性能消耗。
• 原代码中label的写法有误，需修正为{item.name}；同时列表项必须添加唯一key属性（用item.id是最优选择）。

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