如何从 FlatList 组件设置父状态？答案

【问题标题】：How to set parent state from FlatList component?如何从 FlatList 组件设置父状态？
【发布时间】：2021-05-14 08:52:44
【问题描述】：

我有一个PaymentMethodsScreen 屏幕。在这个屏幕上有一个FlatList，里面有PaymentCardItem 组件。 PaymentCardItem 中有一个复选框。当检查此复选框时，我想更新 selectedcardtoken PaymentMethodsScreen。但不幸的是，我不知道该怎么做。我试图传递道具，但我做错了。这是我的代码（没有传递道具）。

我怎样才能做到这一点？非常感谢您的帮助。

const PaymentCardItem = ({ family,  association, bin_number, token, isSelected }) => (
    <View>
        <RadioCheckbox 
            selected={ isSelected }
            onPress={ () => this.setSelectedCardToken(token) // Something wrong here } 
            />
        <Text>{family}, {association}</Text>
        <Text>{bin_number}**********</Text>
    </View>
);

const PaymentMethodsScreen = ({navigation}) => {

    const {state} = useContext(AuthContext);

    const [cardList, setCardList] = useState(null) // This stores card list data from API request
    const [selectedCardToken, setSelectedCardToken] = useState('test token')


    const renderItem = ({ item }) => (
        <PaymentCardItem
            bin_number={item.bin_number} 
            family={item.family} 
            association={item.association} 
            token={ item.token }
            isSelected={ (selectedCardToken == item.token) }
        />
      );



  return (
        <SafeAreaView>
                        <View>

                                <FlatList
                                    data={cardList}
                                    renderItem={renderItem}
                                    keyExtractor={item => item.alias}
                                />
                        </View>
        </SafeAreaView>
  );
};

【问题讨论】：

标签： reactjs react-native react-native-flatlist

【解决方案1】：

将 onPress 属性添加到 PaymentCardItem：

// PaymentMethodsScreen

    <PaymentCardItem
        onPress={() => setSelectedCardToken(item.token)}
    >

我不知道 PaymentCardItem 组件的结构，但通常你应该在组件中的 TouchableOpacity 或任何你的 onPress 处理程序上添加 onPress 属性：

// PaymentCardItem component

    <TouchableOpacity 
        onPress={() => props.onPress()}
    >

【讨论】：

【解决方案2】：

您可以将选中或取消选中复选框时调用的处理函数传递给PaymentCardItem 组件。

您也可以直接传递setSelectedCardToken，但如果您在更新状态之前有一些额外的逻辑，最好有一个处理程序以提高可读性。

所以，代码将如下所示。


const PaymentMethodsScreen = ({ navigation }) => {

    const { state } = useContext(AuthContext);

    const [cardList, setCardList] = useState(null) // This stores card list data from API request
    const [selectedCardToken, setSelectedCardToken] = useState('test token')

    const handleCardTokenSelection = (isTokenSelected) => {
      if(isTokenSelected) { 
        setSelectedCardToken(); // whatever logic you have
      } else {
        setSelectedCardToken(); // whatever logic you have
      }
    }

    const renderItem = ({ item }) => (
        <PaymentCardItem
            bin_number={item.bin_number} 
            family={item.family} 
            association={item.association} 
            token={ item.token }
            isSelected={ (selectedCardToken == item.token) }
            handleCardTokenSelection={handleCardTokenSelection}
        />
      );



  return (
        <SafeAreaView>
          <View>
            <FlatList
              data={cardList}
              renderItem={renderItem}
              keyExtractor={item => item.alias}
            />
          </View>
        </SafeAreaView>
  );
};


const PaymentCardItem = ({ family,  association, bin_number, token, isSelected, handleCardTokenSelection }) => (
    <View>
        <RadioCheckbox 
            selected={ isSelected }
            onPress={handleCardTokenSelection} 
            />
        <Text>{family}, {association}</Text>
        <Text>{bin_number}**********</Text>
    </View>
);

【讨论】：

【解决方案3】：

你需要为PaymentCardItem而不是为整个Flatlist设置状态，以显示该项目被选中。

我认为您将PaymentCardItem 组件更新为类似于以下代码的内容（您可以根据需要更新逻辑）

class PaymentCardItem extends React.Component {
   constructor(props) {
    super(props);
    this.state = {selectedCardToken: "", isSelected: false};
  }

  setSelectedCardToken=(token)=>{
    if(selectedCardToken == token){
      this.setState({
        selectedCardToken: token,
        isSelected: true
     })
    }
  }

  render() {
    const { family,  association, bin_number, token  }=this.props;
    const { isSelected } = this.state;
    return (
      <View>
        <RadioCheckbox 
            selected={ isSelected }
            onPress={ () => this.setSelectedCardToken(token)
            />
        <Text>{family}, {association}</Text>
        <Text>{bin_number}**********</Text>
    </View>
    );
  }
}

【讨论】：