TypeScript中更新对象数组类型React state时setState报错该如何解决

你的updateProductQuantity函数存在无返回值的分支：当operation为decrease且计算后的数量小于minValue时，函数直接执行空return，此时返回值为undefined，TS会将函数返回类型推导为any[] | undefined。而setQuantity要求入参必须是any[]类型或state更新回调函数，不接受undefined，因此触发TS2345报错。

可选择以下任意一种方式修复：

• 方案1：修改分支逻辑，始终返回数组
  将decrease分支的空返回改为返回原数组，保证函数所有分支都返回合法数组类型：

// 将原来的判断逻辑
if (minValue && newValue < minValue) return;
// 替换为
if (minValue && newValue < minValue) return products;

• 方案2：调用时校验返回值后再更新state
  如果需要在值小于最小值时不触发state更新，可在调用setQuantity前增加非空判断：

const newQuantities = updateProductQuantity(quantity, id, 'increase', 1);
if (newQuantities) {
  setQuantity(newQuantities);
}

1. 你当前decrease分支的最小值判断逻辑存在计算错误：先执行了updatedQuantity = products[index].q - 1，又额外计算了newValue = updatedQuantity - 1，相当于多减了1，会导致最小值校验不符合预期。建议直接判断updatedQuantity < minValue即可。
2. 尽量避免用any定义类型，可显式声明数组项类型提升类型安全性：

type ProductQty = {
  id: string;
  q: number;
}
const [quantity, setQuantity] = React.useState<ProductQty[]>([
  { id: '1', q: 100 },
  { id: '2', q: 50 },
  { id: '3', q: 50 },
]);

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