React Native使用Redux Persist+AsyncStorage存储对象数组遇展开错误

你踩的这个坑其实很典型——错误提示已经说得很直白了：你尝试用数组的扩展语法去操作一个非可迭代的对象，而对象本身没有Symbol.iterator方法，自然没法用[...obj]这种方式扩展。

问题根源 #

你想实现的是往数组里追加元素，所以写了[...state.boutiquepanie , action.value]，但当前state.boutiquepanie的类型是对象，不是数组。而当你直接赋值boutiquepanier:action.value时能正常工作，说明action.value的格式刚好和你初始state里的对象类型匹配，但这显然不是你要的「数组追加」逻辑。

具体修复步骤 #

1. 修正初始state的类型
   首先要确保你的reducer初始state里，boutiquepanie是数组类型，而不是对象：

   // 错误示例（对象类型）
   const initialState = {
     boutiquepanie: {}
   }
   
   // 正确示例（空数组）
   const initialState = {
     boutiquepanie: []
   }
   

2. 调整追加逻辑的写法
   根据action.value的类型调整：

   • 如果action.value是单个要添加的对象：

     // 追加单个对象到数组末尾
     boutiquepanie: [...state.boutiquepanie, action.value]
     

   • 如果action.value是一组对象（数组）：

     // 批量追加多个对象
     boutiquepanie: [...state.boutiquepanie, ...action.value]
     

3. 清理旧的错误存储数据（关键）
   因为你用了Redux Persist，之前可能已经把对象类型的boutiquepanie存在了AsyncStorage里。如果不清理，重新运行时旧的对象数据会覆盖你新设置的数组初始state，导致错误依然出现。你可以：

   • 简单粗暴一点：卸载重装APP
   • 优雅一点：在代码里调用persistStore.purge()来清除存储的persist数据

这样调整后，你的数组追加逻辑就能正常工作，同时Redux Persist也能正确持久化这个数组了。

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