React Native函数式组件react-native-select2选中回调值不更新问题

函数式组件下选中状态不同步、展示异常是三个写法错误导致的：

• 变量声明顺序错误：useState初始化时引用了后面才声明的mockData，首次渲染拿到的初始值为undefined
• 状态更新格式错误：onSelect、onRemoveItem回调返回的参数本身就是更新后的完整选项数组，原代码用setData({ data })把状态包装成了对象结构，和Select2组件要求的数组类型data入参不匹配
• 静态数据重复创建：mockData写在组件内部，每次组件重渲染都会生成新的数组引用，触发Select2非必要重渲染导致状态错乱

import React, { useState } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import Select2 from "react-native-select-two"
// 可从本地文件导入组件
import AssetExample from './components/AssetExample';

// 也可导入npm源中提供的任意纯JavaScript模块
import { Card } from 'react-native-paper';

// 静态选项数据移到组件外部声明，避免每次渲染生成新引用
const mockData = [
  { id: 1, name: "React Native Developer", checked: true}, // 设置默认选中状态以渲染选项
  { id: 2, name: "Android Developer", color: '#f00' },
  { id: 3, name: "iOS Developer", color: '#f00' }
]

export default function App() {
  const [selectData, setSelectData] = useState(mockData);
  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>
        在编辑器中修改代码即可在手机上实时查看效果！保存后可获取可分享的访问链接。
      </Text>
      <Select2
          style={{ borderRadius: 5 }}
          colorTheme="blue"
          popupTitle="Select item"
          title="Select item"
          data={selectData}
          onSelect={updatedData => {
           setSelectData(updatedData)
          }}
          cancelButtonText = "Cancel"
          selectButtonText = "Select"
          onRemoveItem={updatedData => {
           setSelectData(updatedData)
          }}
        />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

• 将静态选项数组mockData移到组件外部声明，既解决了useState初始化时变量未定义的问题，也避免了每次渲染生成新数组引用触发组件异常重渲染
• 修正状态更新逻辑：回调返回的带最新checked状态的选项数组直接传入状态更新方法，不再额外包装为对象，保证Select2接收到的data属性格式符合要求
• 重命名状态变量为selectData和静态初始数据做区分，避免同名变量赋值混淆

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