React TypeScript中number无法赋值给never类型报错怎么修复？

错误原因 #

• 未给存储选中值的数组状态cSelected声明泛型类型，TypeScript默认将空数组推断为never[]类型，无法接收数字类型的元素
• onCheckboxBtnClick方法的入参错误声明为never类型，和实际传入的数字参数类型不匹配
• 你提到的第二个报错和未初始化的rSelected状态有关，如果你需要用到该状态，没有初始值的情况下它的类型是number | undefined，直接赋值数字会触发类型报错
• 额外优化点：直接修改原状态数组的push、splice操作不符合React状态不可变原则，可能引发意料之外的渲染问题

修复步骤 #

1. 给cSelected对应的useState添加泛型声明，指定为数字类型数组
2. 将onCheckboxBtnClick的入参类型修改为number
3. 调整状态更新逻辑，先拷贝原数组再做增删操作，避免直接修改原状态
4. 若需使用rSelected，给对应useState添加初始值即可解决第二个报错

修复后完整代码 #

import { useState } from 'react';
import { Button, ButtonGroup } from 'reactstrap'; // 可根据你实际使用的UI库调整引入

const Example = () => {
  // 显式声明数组泛型为number[]
  const [cSelected, setCSelected] = useState<number[]>([]);
  // 需使用rSelected的话加初始值即可，比如useState<number>(0)
  const [rSelected, setRSelected] = useState<number>();

  // 入参类型改为number
  const onCheckboxBtnClick = (selected: number) => {
    // 先拷贝原数组，不直接修改原状态
    const newSelected = [...cSelected];
    const index = newSelected.indexOf(selected);
    if (index < 0) {
      newSelected.push(selected);
    } else {
      newSelected.splice(index, 1);
    }
    setCSelected(newSelected);
  };

  return (
    <div>
      <h5>Checkbox Buttons</h5>
      <ButtonGroup>
        <Button color="primary" onClick={() => onCheckboxBtnClick(1)} active={cSelected.includes(1)}>
          One
        </Button>
        <Button color="primary" onClick={() => onCheckboxBtnClick(2)} active={cSelected.includes(2)}>
          Two
        </Button>
        <Button color="primary" onClick={() => onCheckboxBtnClick(3)} active={cSelected.includes(3)}>
          Three
        </Button>
      </ButtonGroup>
      <p>Selected: {JSON.stringify(cSelected)}</p>
    </div>
  );
}

export default Example

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