React Native中如何在元组数组内使用React Hooks实现复选框列表？

• 语法错误：你使用[check, setCheck]: React.useState(false)作为对象属性的写法不符合JS语法规范。JS对象的计算属性仅支持传入单个值作为键，不能直接写入组解构表达式，因此会触发Unexpected token语法报错。
• 违反Hook规则：你的用法完全不可行。React官方要求Hook必须在组件顶级作用域调用，且每次渲染时Hook的调用顺序必须完全固定。如果将useState写在数组的对象项中，一旦后续调整数组长度、顺序，Hook调用次数/顺序会发生变化，直接触发React运行时报错。

1. 定义静态选项配置 #

只存放复选框的纯展示数据，不要嵌入Hook逻辑：

const CHECKBOX_OPTIONS = [
  { id: '1', name: 'Checkbox 1' },
  { id: '2', name: 'Checkbox 2' }
]

2. 统一管理复选框选中状态 #

使用单个状态对象统一存储所有复选框的选中值，key为选项唯一标识，value为布尔值代表选中状态：

// 初始化所有复选框为未选中状态
const [checkedMap, setCheckedMap] = React.useState(() => {
  return CHECKBOX_OPTIONS.reduce((acc, option) => {
    acc[option.id] = false
    return acc
  }, {})
})

3. 实现选中切换逻辑 #

const toggleCheckbox = (optionId) => {
  setCheckedMap(prevState => ({
    ...prevState,
    [optionId]: !prevState[optionId]
  }))
}

4. FlatList渲染复选框列表 #

import { FlatList, View, Text } from 'react-native'
import { Checkbox } from 'react-native-paper'

// 组件返回内容中写入以下代码
<FlatList
  data={CHECKBOX_OPTIONS}
  keyExtractor={item => item.id}
  renderItem={({ item }) => (
    <View style={{ flexDirection: 'row', alignItems: 'center', marginVertical: 4 }}>
      <Checkbox.Android
        status={checkedMap[item.id] ? 'checked' : 'unchecked'}
        onPress={() => toggleCheckbox(item.id)}
      />
      <Text>{item.name}</Text>
    </View>
  )}
/>

内容的提问来源于stack exchange，提问作者Adin Softić