TypeScript中使用扩展语法将对象解压到数组时出错的求助

错误原因 #

你遇到的Error type must have a '[Symbol.iterator]()' method that returns an iterator错误，核心问题是你尝试扩展的目标（这里是state.cities）不是可迭代对象。数组扩展语法[...x]要求x必须是数组、Set这类实现了Symbol.iterator接口的类型，普通对象默认没有这个接口，因此触发报错。

解决方案 #

1. 修正state的类型定义 #

检查你的状态类型（比如State接口），确保cities被明确标记为City[]（City类型的数组），而非单个City对象或其他非数组类型：

interface State {
  isLoading: boolean;
  cities: City[]; // 必须定义为数组类型
  currentCity: City | null;
  // 其他状态属性...
}

2. 确保state.cities初始化为数组 #

如果状态初始化时cities不是空数组，而是undefined或单个对象，会导致运行时错误。确保初始值正确：

const initialState: State = {
  isLoading: true,
  cities: [], // 初始化为空数组
  currentCity: null,
  // 其他初始属性值...
};

3. 确认扩展语法的使用场景 #

你当前的代码[...state.cities, action.payload]本身是正确的（将新的City对象追加到数组末尾），只要state.cities是数组类型就不会报错。如果是误将单个对象用扩展语法（比如写了[...action.payload]），应直接将对象作为数组元素，写成[action.payload]或追加到现有数组中。

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