Javascript 动态复选框未按预期运行

我正在运行React本机应用程序。
我希望我的复选框是动态的。下面的代码使复选框动态，但我无法获得所需的格式

App.js

构造函数（道具）{
超级（道具）
此.state={
数据：[
{id:1，键：'Read'，键入：'HeartRate'，选中：false}，
{id:2，键：'Write'，键入：'HeartRate'，选中：false}，
{id:3，键：'Read'，键入：'BodyMassIndex'，选中：false}，
{id:4，键：'Write'，类型：'BodyMassIndex'，选中：false}
]
}
}
onCheckChanged=（id）=>{
const data=this.state.data；
const index=data.findIndex（x=>x.id==id）；
数据[索引]。选中=！数据[索引]。选中；
此设置状态（数据）；
}
render（）{
返回(
{
this.state.data.map（（项，键）=>
{item.type}
this.onCheckChanged（item.id）}/>
)
}
)
}

上述代码的输出为：

但我希望它是这种格式。“听力”、“读”和“写”都在一行中。
我怎样才能做到这一点？任何帮助都会很好

试试这种方法

onCheckChanged = (item, key) => {                 
    const newData = {...this.state.data}; // Deep cloning data
    newData[index].checked = !newData[index].checked; // Mutate the value
    this.setState(newData); // Reset state to reflect on screen
}


render() {
    return (
            {
                this.state.data.map((item,key) => 
                // Remove warning by adding `key` prop here
                <View key={`${key}`}  ...>
                  ...
                 <CheckBox ... 
                     checked={item.checked} 
                     onPress={()=>this.onCheckChanged(item, key)}
                 />
               </View>
               )
           }
    )
}

onCheckChanged=（项，键）=>{
const newData={…this.state.data}；//深度克隆数据
newData[index].checked=！newData[index].checked；//更改值
this.setState（newData）；//重置状态以反映在屏幕上
}
render（）{
返回(
{
this.state.data.map（（项，键）=>
//通过在此处添加'key'道具删除警告
...
this.onCheckChanged（项，键）}
/>
)
}
)
}

我认为在呈现复选框数据之前，需要对其进行格式化。您可以像下面这样格式化它

const formattedData = [
  {
    id: 1,
    type: 'HeartRate',
    options: [
      { key: 'Read', checked: false },
      { key: 'Write', checked: false },
    ],
  },
  {
    id: 2,
    type: 'BodyMassIndex',
    options: [
      { key: 'Read', checked: false },
      { key: 'Write', checked: false },
    ],
  },
];

如果您想要实现上面提到的输出，您可以像这样渲染所有项目-

{formattedData.map((item, index) => {
        return (
          <View>
            <View style={{ flexDirection: 'row',  marginBottom: 20 }}>
              <Text>{item.type}</Text>
              {item.options.map((val) => {
                return (
                  <View style={{ flexDirection: 'row', marginLeft: 10, }}>
                    // this should be your checkbox
                    <View style={styles.checkbox} />
                    <Text style={{ marginLeft: 10 }}>{val.key}</Text>
                  </View>
                );
              })}
            </View>
          </View>
        );
      })}

{formattedData.map（（项，索引）=>{
返回(
{item.type}
{item.options.map（（val）=>{
返回(
//这应该是您的复选框
{val.key}
);
})}
);
})}

你会得到这样的输出

---

最后，是一个工作演示，供您参考。

它以相同的格式显示。见我问题中的第二幅图。我想要那种格式。