每个组件都有独立状态的React-Native FlatList

Question

这是我的代码，用于在App上显示带有订单详细信息的FlatlList。 在FlatList的组件中，将显示单选按钮，图标和一个按钮。 每当用户单击按钮时，单选按钮都将被隐藏（我在状态变量的帮助下处理此功能。问题是，当我单击组件内部的按钮时，单选按钮和图标在每个组件中都显示/隐藏。我希望它分别在组件内部发生，因此单选按钮和图标将在我正在工作的组件内部隐藏/显示，而不是在其他组件内部。请帮助解决此问题，这浪费了我很多时间，在此先感谢您！

<FlatList
  data={this.state.dataSource2}
  extraData={this.state}
  keyExtractor={(item, index) => index}
  renderItem={({ item, index }) => (
    <View style={styles.addressBox}>
      <Text style={styles.deliveryNumber}> {index} </Text>
      <Text style={styles.pickupLocation1}> Delivery Location </Text>
      <Text style={styles.address1}>
        {' '}
        {item.flat_name} {item.building_name}
        {item.city}{' '}
      </Text>
      <Text style={styles.pickupLocation1}>
        {' '}
        {item.f_name} {item.l_name}{' '}
      </Text>
      <Text style={styles.address1}> {item.mobile} </Text>
      {this.state.status == false ? (
        <View style={styles.viewIcon}>{myIcon}</View>
      ) : null}
      {this.state.setStatus1 == false ? (
        <View>
          <TouchableOpacity
            onPress={this.setOrderStatus}
            style={styles.statusButton}>
            <Text style={styles.statusButtonText}>Status</Text>
          </TouchableOpacity>
        </View>
      ) : null}
      {this.state.statusView1 == false ? (
        <View style={styles.viewStatus}>
          <RadioForm
            radio_props={deliveryStatus}
            formHorizontal={true}
            buttonSize={10}
            buttonColor={'#7B1113'}
            labelStyle={{ fontSize: 13 }}
            onPress={value => {
              deliveryStatus.value;
            }}
          />
          <TouchableOpacity
            onPress={this.setStatusFun2}
            style={styles.updateStatusButton}>
            <Text style={styles.buttonText}>Update Status</Text>
          </TouchableOpacity>
        </View>
      ) : null}
    </View>
  )}
/>

Answer 1

在React Native中，如果您希望组件具有自己的状态管理，则应始终为其创建一个单独的组件。

您应根据需要将render方法中的所有内容移到另一个类（组件或PureComponent）中，并在该类中而不是在使用FlatList的类中处理状态更改。

然后简单地做

<FlatList
  data={this.state.dataSource2}
  extraData={this.state}
  keyExtractor={(item, index) => index}
  renderItem={(item, index) => <CustomComponent item={item} index={index}/>
/>

这样，每个单独的列表项将仅对自己的状态负责，而不会影响其他项。 用您选择为列表项命名的任何名称替换CustomComponent。

请记住，如果您需要在选择子项时更新父组件的状态（具有FlatList的父组件）的状态，则可能必须传递一个函数，作为对CustomComponent的支持。