React Native切换Switch报undefined is not a function错误

TypeError: undefined is not a function (near '...mockAchievements.map...')

报错核心原因是状态类型被意外修改：

1. 初始化mockAchievements时，你定义的是数组类型的state，数组自带.map()方法，首次渲染列表不会触发报错
2. 但toggleSwitch里的状态更新逻辑存在错误：你在更新函数里返回的是一个普通对象{}，第一次点击Switch触发状态更新后，mockAchievements就从原本的数组变成了普通对象
3. 普通对象没有.map()方法，后续渲染列表执行mockAchievements.map(...)时，JS引擎识别到map是undefined，就会抛出"undefined is not a function"的错误

修改toggleSwitch的状态更新逻辑，保证更新后mockAchievements仍然是数组类型，推荐用数组map方法做不可变更新，避免副作用：

// 记得先从react导入useState，否则useState本身也会触发报错
import { useState } from 'react';
import { Switch } from 'react-native';

// 初始化state的代码保持原有结构即可
const [mockAchievements, setAchievements] = useState([
  { isEnabled: false },
  { isEnabled: false }
])

function toggleSwitch(value, index) {
  setAchievements((prevAchievements) => {
    // 遍历原数组生成新数组，不直接修改原状态
    return prevAchievements.map((item, idx) => {
      // 匹配到当前点击的下标项，更新isEnabled值
      if (idx === index) {
        return {
          ...item,
          isEnabled: value
        }
      }
      // 其余项保持原值返回
      return item
    })
  });
}

Switch组件的渲染代码不需要改动，替换上述逻辑后，点击开关即可正常切换对应项的状态，不会再触发类型错误。

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