React/TypeScript使用setState+prevState时出现Expression expected错误

错误原因 #

你遇到的语法错误是因为可选链操作符?不能直接用在数组展开语法...之后。TypeScript不允许这种写法，...后面需要明确的可迭代表达式，prevState.allData?的语法不符合规范。另外代码里存在笔误：你在setState里更新的是allTasks，但状态接口定义的是allData，这会导致状态字段不匹配。

修复方案 #

1. 替换可选链为兜底空数组 #

用逻辑或操作符||给prevState.allData兜底空数组，确保展开操作始终有合法的可迭代对象，同时修正字段名：

this.setState((prevState) => ({
  allData: [prevState.data, ...(prevState.allData || [])],
  data: {}
}));

2. 可选：用空值合并操作符（更严谨） #

如果你的TypeScript版本支持空值合并??，可以用它替代||，避免allData为空数组时被错误替换：

this.setState((prevState) => ({
  allData: [prevState.data, ...(prevState.allData ?? [])],
  data: {}
}));

3. 额外优化：处理data的可选性 #

因为data在接口里是可选字段（data?: FormData），如果data可能为undefined，建议先判断再添加，避免数组混入无效值：

this.setState((prevState) => ({
  allData: [
    ...(prevState.data ? [prevState.data] : []),
    ...(prevState.allData ?? [])
  ],
  data: {}
}));

关键说明 #

• 可选链?.用于访问可能为null/undefined的属性，但不能直接作为展开操作的目标，必须通过兜底操作确保表达式是可迭代的数组。
• 必须修正allTasks为allData，保证状态字段和接口定义一致，避免后续状态访问出现问题。

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