react-native 改变了数组中元素的属性？

Question

我有一个FlatList，我想实现一个收音机button.My想法是改变this.state.data中元素的选定属性来控制它，但是我是新手，不知道如何修改this.state.data.

中某个元素的属性

这是我的代码：

this.state = {
  data: [
    {
      month:1,
      price:18,
      selected:true
    },
    {
      month:3,
      price:48,
      selected:false
    },
    {
      month:12,
      price:128,
      selected:false
    },
  ],
};

<FlatList
  data={this.state.data}
  renderItem={({item, index, separators}) => (
    <TouchableOpacity onPress={() => this.radio(index,item)}>
    <View style={item.selected ? {borderWidth:3,borderColor:'#FFA371',borderRadius:15}:{}}>
      <View style={styles.itemDefalut}>
        <View style={{ flexDirection: "column", flex: 1 }}>
          <Text>
          Months
          </Text>
          <Text>{item.month} Months</Text>
        </View>
        <View>
          <Text>${item.price}</Text>
        </View>
      </View>
    </View>
    </TouchableOpacity>
  )}
/>

radio(index,item) {
  for (var variable in this.state.data) {
    variable.selected = false;
  }
  item.selected = true;
}

Answer 1

仅第一遍 index 来自 onpress

onPress={() => this.radio(index)

然后在 radio 函数中做这样的事情

radio = index => {
  let data = [ ...this.state.data ];
  this.state.data.map((elem,key)=>{
    if(elem.month==data[index].month){
       data[key]={...data[key], selected: true};
    }else{
     data[key]={...data[key], selected: false};
    }
  })
  this.setState({ data:data});
}

Answer 2

radio(item) {
  let data = [...this.state.data]; 
  let index = data.findIndex(el => el.month === item.month); 
  data[index] = {...data[index], selected: !item.selected};
  this.setState({ data });
}

在按下时的 TouchableOpacity 中，它应该是

<TouchableOpacity onPress = {this.radio.bind(this,item)}>

react-native 改变了数组中元素的属性？

react-native changes the properties of the elements in the array?

radio-button

react-native

react-native-flatlist