React native 从贴图渲染后的多个复选框方法是否有效？

我试图从一组对象中呈现一个带有复选框的水果名称列表，这些复选框的行为与预期不符。 我有一个名为fruits.JSON的JSON文件

[
    {
        "id": 0,
        "key": "mango",
        "checked": false
    },
    {
        "id": 1,
        "key": "apple",
        "checked":false
    },
    {
        "id": 2,
        "key": "banana",
        "checked":false
    }
]

很抱歉，我已使用复选框呈现水果名称。现在复选框不起作用。我使用了以下代码

import React, {useState} from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
const Fruitdata = require('./fruits.json');
import CheckBox from '@react-native-community/checkbox';

const CBexample = () => {
  const [data, setData] = useState(Fruitdata);
  const onChangeValue = id => {
    console.log('data', data);
    const index = data.findIndex(x => x.id === id);
    data[index].checked = !data[index].checked;
    setData(data);
  };
  return data.map((item, key) => (
    <View key={item.id}>
      <Text>{item.key}</Text>
      <TouchableOpacity onPress={() => onChangeValue(item.id)}>
        <CheckBox disabled={false} value={item.checked} />
      </TouchableOpacity>
    </View>
  ));
};

export default CBexample;

import React，{useState}来自“React”；
从“react native”导入{View，Text，TouchableOpacity}；
const Fruitdata=require（'./fruits.json'）；
从“@react native community/CheckBox”导入复选框；
常量CBexample=（）=>{
const[data，setData]=useState（数据）；
const onChangeValue=id=>{
console.log（'data'，data）；
const index=data.findIndex（x=>x.id==id）；
数据[索引]。选中=！数据[索引]。选中；
setData（数据）；
};
返回数据.map（（项目，键）=>(
{item.key}
onChangeValue（item.id）}>
));
};
导出默认值示例；

为什么不使用函数或类？ 必须导出函数或类