从平面列表中选择一项

Question

我创建了这个项目列表，我想让用户选择一个项目，然后改变这个项目的样式。 这是我的方法：

class Gift extends React.Component {
  constructor(props){
    super(props)
    this.titleUpValue = new Animated.Value(0);
    this.state = {
      isLoading: false,
      listGifts: [
  {
      "id" : "1",
      "type" : 'gift' ,
      "etat" : 1,
      "titreTransaction": "عدد الوحدات",
      "contenuTrans": "400",
      "dateTrans": "2019-07-31 17:47:31"
  },
  {
      "id" : "2",
      "type" : 'ba' ,
      "etat" : 1,
      "titreTransaction": "عدد الوحدات",
      "contenuTrans": "1000",
      "dateTrans": "2019-07-31 17:42:57"
  },
  {
      "id" : "3",
      "type" : 'ba' ,
      "etat" : 1,
      "titreTransaction": "عدد الوحدات",
      "contenuTrans": "500",
      "dateTrans": "2019-07-31 17:31:35"
  },
  }
],
      itemId: null,
      btnDisabled: true,
      itemindex: null,
    }
  }

  PressedItem = (itemId) => {
      this.setState({ itemId: itemId, btnDisabled: false,})

  }

  renderItem = ({ item }) => {
    return (
          <TouchableOpacity
          onPress={() => { this.setState({ itemindex: item.id, itemId: item.id, btnDisabled: !this.state.btnDisabled, }), console.warn('id > ' +  this.state.btnDisabled) }}
          style= {[
            StylesGift.giftItem,
              this.state.itemindex === item.id ? StylesGift.SelectedlistItem : StylesGift.UnselectedlistItem

          ]}>
            <Image source={Images.gift1}
              style={StylesGift.imageStyle}
              resizeMode={'contain'}
            />
          <View style= {StylesGift.footGift}>
            <View style= {StylesGift.nameGiftContainer}>
              <View style= {StylesGift.valueGiftContainer}>
                <Text style= {StylesGift.valueGiftText}>200</Text>
              </View>
              <Text style= {StylesGift.nameGiftText}>الهدايا</Text>
              <Text style= {StylesGift.nameGiftText}>{item.id}</Text>

            </View>

          </View>
          <View style= {StylesGift.headGift}>
            <View style= {StylesGift.icGiftContainer}>
              <IconFA name="check" size={hp('1.6%')} color= {Colors.white} style={StylesGift.icGift}/>
            </View>
          </View>
        </TouchableOpacity>

    )
}
  render() {

    return (



        <View style={Styles.listContainer}>
          {
            this.state.isLoading ?
            <ActivityIndicator size='large' style={Styles.styleAI} color={Colors.mainYellow}/>
            :
            <FlatList
              style={Styles.flatlist}
              contentContainerStyle={Styles.flatContent}
              data={this.state.listGifts}
              keyExtractor={(item) => item.id.toString()}
              renderItem={this.renderItem}
              numColumns={2}

            />
          }


        </View>
        
            );
          }
        }
        
        export default Gift;

我不使用PressedItem 函数进行测试，onPress 中的consol.warn() 显示最后一个状态而不是当前状态。

例如，当我单击带有id = "1" 的项目时，它会显示id > null，当我单击带有id = "2" 的项目时，它会显示id > 1...，即使使用这种情况：

this.state.itemindex === item.id ? StylesGift.SelectedlistItem : StylesGift.UnselectedlistItem

这是 3 种主要风格：

 giftItem: {
    width: wp('42%'),
    height: hp('30%'),
    alignItems: 'center',
    backgroundColor: Colors.white,
    borderRadius: wp('2%'),
    overflow: 'hidden',
    marginVertical: wp('2%'),
    marginHorizontal: wp('2%'),

    // borderWidth: 1, borderColor: 'blue',
  },

  UnselectedlistItem: {
    elevation: 2,

    borderWidth: 1, borderColor: 'red',
  },
  SelectedlistItem: {
    elevation: 8,

    borderWidth: 1, borderColor: 'blue',
  },

我认为我的方法是合乎逻辑的，而且大部分工作，但我不知道哪里出了问题，声明：itemindex 和 itemId 在 setState 中没有变化

Answer 1

没关系，我只需要在 flatlist 中添加 extraData={this.state} 作为参数来告诉 flatlist 重新渲染

  <FlatList
      style={Styles.flatlist}
      contentContainerStyle={Styles.flatContent}
      data={this.state.listGifts}
      keyExtractor={(item) => item.id.toString()}
      renderItem={this.renderItem}
      numColumns={2}
      extraData={this.state}
    />