react-native - 从地图方法渲染后的多个复选框是否有效？

Question

我正在尝试使用来自对象数组的复选框呈现水果名称列表，这些对象的复选框未按预期运行。我有一个名为 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;