使用useState向状态数组添加元素时报TypeScript TS2322错误如何解决

报错原因 #

你初始化useState的时候直接传入了空数组[]，TypeScript 无法推断该数组的元素类型，会默认将其类型推导为never[]。never类型表示永远不会存在的值，不允许接收任何类型的赋值，所以你往数组里添加number类型的i时就触发了类型不匹配报错。

解决方案 #

1. 给useState指定泛型类型 #

给useState显式声明泛型为number[]，明确这个数组是用来存储数字的即可解决类型报错：

const [pageNumbers, setPageNumbers] = useState<number[]>([]);

2. 优化状态更新逻辑（可选但强烈建议） #

你当前在循环里直接调用setPageNumbers的写法存在逻辑隐患：React的状态更新是批量异步的，循环里每次读取的pageNumbers都是初始的空数组，最终只会得到最后一次更新的结果，也就是[总页数]，没法得到完整的页码数组。
建议先计算出完整的页码数组，再一次性更新状态：

const totalPage = Math.ceil(props.totalCommits / props.CommitsPerPage);
const newPageNumbers = Array.from({length: totalPage}, (_, index) => index + 1);
setPageNumbers(newPageNumbers);

如果确实需要多次更新，可以使用函数式更新的写法，每次都能拿到最新的状态值：

for (let i = 1; i <= Math.ceil(props.totalCommits / props.CommitsPerPage); i++) {
  setPageNumbers(prev => [...prev, i]);
}

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