TypeScript中如何在useState hook创建字符串数组并更新实现头像多选

核心错误点 #

• useState初始化语法与类型声明错误：你当前的useState({arr[],})属于无效语法，相当于将state初始化为包含未定义arr属性的对象，TypeScript无法推断正确类型，默认赋值never[]类型，因此调用includes方法时报错。同时无需将选中数组包裹为对象，直接存储id数组即可。
• 直接修改只读props：props传入的arr是只读属性，直接执行arr.push违反React单向数据流规范，选中状态应该完全由组件内部state管理。
• 选中切换逻辑缺失：当前showIcon方法仅实现了id新增逻辑，没有做「存在则移除、不存在则新增」的切换逻辑，且setVisible直接传入id而非数组，不符合state数据结构要求。
• 参数类型缺失：showIcon方法的入参id没有显式声明类型，会触发TypeScript隐式any类型报错。

修正后代码 #

1. 修正state初始化 #

// 显式声明state为string数组类型，初始值为空数组
const [visible, setVisible] = useState<string[]>([]);

2. 修正showIcon切换逻辑 #

const showIcon = (id: string) => {
  setVisible(prev => {
    // 已选中则移除，未选中则新增
    return prev.includes(id) 
      ? prev.filter(item => item !== id) 
      : [...prev, id];
  });
  // 如果需要将选中结果回传给父组件，可修改onClickAvatar定义，将visible数组作为参数传入
  onClickAvatar();
};

3. 保留原有判断逻辑 #

你原本通过visible.includes(person.customer_id)判断是否展示选中图标的思路是正确的，无需修改。

可选优化 #

如果选中的用户数量较多，可将数组替换为Set类型，has判断的时间复杂度更低，性能更好：

const [visible, setVisible] = useState<Set<string>>(new Set());

const showIcon = (id: string) => {
  setVisible(prev => {
    const newSet = new Set(prev);
    newSet.has(id) ? newSet.delete(id) : newSet.add(id);
    return newSet;
  });
};

// 渲染时判断逻辑改为
{visible.has(person.customer_id) && <CheckIcon />}

内容的提问来源于stack exchange，提问作者Ibrahim Noor Mohammed