渲染多个<Switch>内部地图反应原生

Question

I'm having trouble rendering multiple switches inside map.

I'm having an array looking like this:

array: [
   {
      "title": "test1"
   },
   {
      "title": "test2"
   }
]

Then in the render and return i'm using map and want to display 2 switches:

{this.state.array.map((item, index) => (
   <View key={index}>
     <Switch
       trackColor={{ false: "#767577", true: "#81b0ff" }}
       thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
       ios_backgroundColor="#3e3e3e"
       onValueChange={toggleSwitch}
       value={isEnabled}
      />             
    </View>
))}

The "isEnable" have to be uniq for every switch and I don't know the best practise for doing this?

Answer 1

array: [
   {
      "title": "test1",
      isEnabled:false,
   },
   {
      "title": "test2"
      isEnabled:true,
   }
]


{this.state.array.map((item, index) => (
   <View key={index}>
     <Switch
       trackColor={{ false: "#767577", true: "#81b0ff" }}
       thumbColor={item.isEnabled ? "#f5dd4b" : "#f4f3f4"}
       ios_backgroundColor="#3e3e3e"
       onValueChange={toggleSwitch}
       value={item.isEnabled}
      />             
    </View>
))}

Answer 2

the best approache is to include if the switch is enabled or not in your array

const myArray = [{"title": "test1",isEnabled:true},{"title": "test2",isEnabled:false}]
{myArray.map((item, index) => ( 
<View key={index}> 
 <Switch trackColor={{ false: "#767577", true: "#81b0ff" }}
   thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
   ios_backgroundColor="#3e3e3e"
   onValueChange={toggleSwitch}
   value={item.enabled}
  />             
</View>))}

and in your toggles Switch function make sure to update your array