Question

我有一个 PaymentMethodsScreen 屏幕。在这个屏幕上有一个 FlatList，里面有 PaymentCardItem 组件。 PaymentCardItem 中有一个复选框。选中此复选框后，我想更新 PaymentMethodsScreen 的 selectedCardToken 状态。但不幸的是，我无法弄清楚如何去做。我试图传递道具，但我做错了。这是我的代码（没有传递道具）。

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

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>
  );
};

Answer 1

向 PaymentCardItem 添加 onPress 属性：

// PaymentMethodsScreen

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

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

// PaymentCardItem component

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

Answer 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>
);

Answer 3

您需要为 (node:11024) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1) (node:11024) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code. 设置状态，而不是为整个 Flatlist 设置状态，以显示该项目已被选中。

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

PaymentCardItem

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

3 个答案: