React useState钩子展开prevState时出现迭代器类型错误求助

问题根源 #

你的selectedMetrics状态类型被定义为ISelectedMetrics[] | undefined，这意味着更新时的prevState可能是undefined。而扩展运算符...只能作用于可迭代对象（比如数组），undefined没有迭代器方法，所以TypeScript抛出2488错误。

可行解决方案 #

• 方案1：移除类型中的undefined（推荐，若父组件能保证传入数组）
  既然你初始化状态时用的是空数组[]，如果父组件传入的props也确保是数组而非undefined，可以直接把状态类型简化为ISelectedMetrics[]：

  const [selectedMetrics, setSelectedMetrics] = useState<ISelectedMetrics[]>([]);
  

  这样prevState必然是数组，原更新代码就能正常运行。

• 方案2：给prevState设置默认空数组（兼容父组件可能传入undefined的情况）
  如果父组件确实有可能传入undefined，在更新时给prevState兜底一个空数组即可：

  setSelectedMetrics((prevState) => [...(prevState || []), metric]);
  

• 方案3：用空值合并运算符（更严谨的TS写法）
  TypeScript的空值合并运算符??比||更精准，只会在prevState为null或undefined时返回兜底值：

  setSelectedMetrics((prevState) => [...(prevState ?? []), metric]);
  

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