时间戳

首页 > 解决方案 > React-Native FlatList，每个组件都有单独的状态

javascript - React-Native FlatList，每个组件都有单独的状态

问题描述

这是我在 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>
  )}
/>

标签： javascriptreact-native

解决方案

在 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。

推荐阅读