React Native点击Pressable触发wines.map报函数未定义错误

触发Undefined is not a function (near '... wines.map ...')的原因是三处逻辑错误，共同导致状态更新后wines不再是可执行map方法的数组：

• 状态更新格式不匹配：原代码里setWines({newWines})的写法，会把原本数组类型的wines状态，直接覆盖成普通对象{ newWines: [...] }。此时wines是对象而非数组，不存在map方法，自然抛出对应报错。
• Pressable回调传参错误：原代码写的onPress={ (wine) => toggle(wine) }，Pressable的onPress回调默认传入的是触摸事件对象，根本不是当前循环遍历到的wine数据，导致传给toggle的参数和预期完全不符，后续的图片切换判断永远无法命中。
• 状态更新不符合React不可变更新规则：原toggle逻辑中直接修改遍历到的对象属性wine.imageUrl，没有返回新的对象实例，很容易出现点击后视图不刷新的问题；加上数组遍历生成的新对象和原对象引用不同，原有的wine === pressedWine严格相等判断永远无法匹配到目标条目。

修正后的实现代码 #

1. 替换原toggle函数，用函数式状态更新返回全新的数组结构：

   const toggle = (targetWineName) => {
     setWines(prevWines => 
       prevWines.map(wine => {
         // 匹配到目标条目时切换图片状态
         if (wine.name === targetWineName) {
           return {
             ...wine,
             imageUrl: wine.imageUrl === emptyWine ? fullWine : emptyWine
           }
         }
         return wine
       })
     )
   }
   

2. 修正Pressable的onPress绑定，传入当前条目的唯一标识做匹配：

   <Pressable 
     onPress={ () => toggle(wine.name) }  
     style={[styles.wineIcon]}
   >
     <Image source={wine.imageUrl}  />
   </Pressable>
   

注意：匹配列表条目时优先用name、id这类稳定的唯一字段判断，不要直接用对象引用做严格相等比较，避免数组更新后引用变化导致匹配失效。

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