React实现电子书收藏功能报array state not iterable错误如何解决

错误触发原因 #

• 状态更新函数传参格式错误。setfavList仅接收单个参数作为新的状态值，你当前的写法没有将展开的旧收藏列表、新选中书籍包裹在同一个数组内，相当于给更新函数传递了多个独立参数，更新函数只会取第一个参数作为新状态。如果初始收藏列表为空，第一次调用后favList会被赋值为undefined，后续对其执行数组操作时就会抛出类型错误。
• 存在闭包陷阱隐患。直接依赖当前favList的值生成新状态，短时间多次触发添加操作时，React状态批处理机制会导致你拿到的favList不是最新值，出现收藏记录丢失的问题。

修复方案 #

推荐使用函数式更新写法，同时增加书籍存在性判断、重复收藏判断逻辑，避免异常：

const [favList, setFavList] = useState([]);

// BookList为从谷歌图书API拉取的书籍数组
const addFav = () => {
  // 查找目标书籍
  const targetBook = BookList.find(t => id === t.id);
  // 未找到目标书籍直接终止逻辑
  if (!targetBook) return;
  // 函数式更新，从入参拿到最新的收藏列表
  setFavList(prevFavList => {
    // 查重，避免重复添加同本书
    const isExist = prevFavList.some(book => book.id === targetBook.id);
    if (isExist) return prevFavList;
    // 返回新数组完成状态更新
    return [...prevFavList, targetBook];
  })
}

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