React报错TypeError: prevUserFavourites.concat is not a function如何解决

云上老周

2026-9-25

错误触发原因

concat是数组专属的实例方法，该报错本质是执行更新逻辑时拿到的prevUserFavourites不是数组类型。
虽然你初始化时给useState传入了空数组作为初始值，但只要其他位置调用setUserFavourites时传入了非数组值（比如对象、undefined、null、基础类型值），就会覆盖状态的类型，下一次执行addFavouriteHandler的更新回调时，拿到的prevUserFavourites就不是数组，调用concat直接抛出类型错误。

可行修复方案

方案1：更新逻辑加类型兜底，调用concat前先判断前置状态是否为数组

function addFavouriteHandler(favouriteMeetup) {
  setUserFavourites((prevUserFavourites) => {
    // 非数组时兜底为空数组再执行拼接
    return Array.isArray(prevUserFavourites) 
      ? prevUserFavourites.concat(favouriteMeetup)
      : [favouriteMeetup];
  });
}

方案2：全量排查所有setUserFavourites的调用位置，确保每次更新传入的都是数组类型
禁止出现setUserFavourites(null)、setUserFavourites({})这类写法，即便是清空收藏、删除单个收藏的逻辑，也要保证返回值是数组：比如清空时传[]、删除单个时用filter返回过滤后的新数组。
方案3：使用数组扩展运算符替代concat，同时加类型兜底，逻辑等价

function addFavouriteHandler(favouriteMeetup) {
  setUserFavourites((prevUserFavourites) => {
    return [...(Array.isArray(prevUserFavourites) ? prevUserFavourites : []), favouriteMeetup];
  });
}