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

Question

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

sellablePartsCategory = [];

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 循环并使其只运行一次。它给了我数组的零索引值，然后循环中断。我不知道如何解决问题。 CheckBoxComponent.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;
}