如何在反应本机中对 JSON 响应创建动态复选框

Question

我是一只反应原生的新蜜蜂。如果我反复问问题，请原谅我。我问的是相对问题，因为之前关于这个话题的问题对我没有帮助。我想在JSON响应的基础上创建动态复选框，我已经在一个数组中收集了数据，下面是代码。

sellablePartsCategory = [];

可售零件类别包含数据

sellablePartsCategory = ["Brake", "Suspension", "Engine", "Tyre"]
renderParts(){
    for(let i=0; i<sellablePartsCategory.length; i++){
      return(
        <CheckBoxComponent 
            title={sellablePartsCategory[i]}
            checked= {true} /> );
    }
}
 render(){
 <View>
    <Text> {sellablePartsCategory} </Text>
      {this.renderParts()}
 </View> }

我知道 return 语句正在破坏 for 循环并使其只运行一次。它给了我数组的零索引值，然后循环中断。我不知道如何解决问题。复选框组件.js 是

import React, { Component } from 'react';                         
import {TextInput, StyleSheet, View, Text} from 'react-native';   
import { CheckBox, ListItem, List } from 'react-native-elements';  
const CheckBoxComponent = ({title, checked}) => {
return (
    <CheckBox
        title={title}
        checkedColor='#0D4A8E'
        checked={checked}
        />
);};
export { CheckBoxComponent };

Answer 1

在 renderParts() 方法中，可以仅使用单个返回返回返回列表中的所有复选框。尝试以下代码：

renderParts(){
    let checkBoxComponentList = [];
    for(let i=0; i<sellablePartsCategory.length; i++){
        checkBoxComponentList.push(<CheckBoxComponent 
            title={sellablePartsCategory[i]}
            checked= {true} />);
    }
    return checkBoxComponentList;
}