每个组件的反应与单个状态的反应列表

Question

这是我的代码，在应用程序上显示订单详细信息的flatllist。将显示在FlatList，单位按钮，图标和一个按钮的组件中。每当用户单击按钮时，收音机按钮都会被隐藏（我在状态变量的帮助下处理此功能。问题是，每当我单击组件中的按钮，单选按钮和图标都在每个组件中显示/隐藏。我希望它在组件中单独发生。因此，收音机按钮和图标将被隐藏/显示在我正在工作的组件中，而不是在其他组件中。请帮助这个问题是浪费我的时间。P>

<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中，如果您希望组件具有自己的状态管理，则应始终为其创建一个单独的组件。

您应该在另一个类中移动渲染方法内的所有内容，该类是组件或定币组件，具体取决于您的要求，并处理该类内部的状态更改，而不是使用flatlist的类。

然后简单地做

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

以这种方式，每个单独的列表项目将仅对其自己的状态负责，并且不会影响其他项目。用您选择命名列表项目的任何名称替换CustomComponent。

请记住，如果您需要在选择子女的选择时更新父组件（具有lintlist的状态），则可能必须通过将其作为prop的功能传递给您的CustomComponent。<<<<<<<<<<