REACT - 状态更改时本机 BottomSheetFlatList 更新数据错误

Question

这是我的代码。当我点击左侧的时间图标时，它并没有删除我想要的数据。我用的是Bottom Sheet，请帮帮我，谢谢

组件

  <BottomSelectedRecipient
     onSelect={handleSelectRecipientBottom}
     data={recipientSelected}
     innerRef={bottomSelectedRecipientRef}
  />

  const { t } = useTranslation();
  const colorSchema = useColorScheme();
  const handlePressClose = (id: string) => {
    onSelect?.(id);
  };

  return (
    <AppBottomSheet innerRef={innerRef} snapPoints={['80%']}>
      <View style={tw`flex-1`}>
        <AppTypography
          bold
          textMd
          style={tw`mx-24 dark:text-neutral-0 mt-24 mb-12`}>
          Recipients selected
        </AppTypography>
        <BottomSheetFlatList
          extraData={data}
          data={data}
          renderItem={({ item }) => {
            return (
              <View
                style={tw`flex-row items-center  gap-12 mx-24 py-12 flex-1`}>
                <Avatar
                  size={40}
                  source={
                    item.profileImage
                      ? {
                          uri:
                            process.env.EXPO_PUBLIC_S3_SERVER +
                            item.profileImage,
                        }
                      : undefined
                  }
                  title={generateInitials(
                    !item.firstName || !item.lastName
                      ? 'MC'
                      : `${item.firstName || ''} ${item.lastName || ''}`.trim(),
                  )}
                />
                <View style={tw`flex-1`}>
                  <AppTypography
                    bold
                    textMd
                    style={tw`dark:text-neutral-0`}
                    numberOfLines={1}>
                    {`${item.firstName || ''} ${item.lastName || ''}`.trim()}
                  </AppTypography>
                  <AppTypography
                    medium
                    textSm
                    style={tw`dark:text-neutral-400`}>
                    {item.contact?.phoneNumber}
                  </AppTypography>
                </View>
                <TouchableOpacity
                  style={tw`w-32 h-32 items-center justify-center`}
                  onPress={() => handlePressClose(item.customerId)}>
                  <CloseIcon
                    size={20}
                    color={
                      colorSchema === 'dark' ? tw.color('neutral-0') : undefined
                    }
                  />
                </TouchableOpacity>
              </View>
            );
          }}
          ListEmptyComponent={
            <View style={tw`my-24`}>
              <AppTypography
                medium
                textMd
                align={'center'}>{t`no_customer`}</AppTypography>
            </View>
          }
        />
      </View>
    </AppBottomSheet>
  );
};

我尝试这个功能来清除数据

  const handleSelectRecipientBottom = useCallback(
    (id: string) => {
      // setFieldValue(
      //   'recipientsList',
      //   values.recipientsList.filter(item => item !== id),
      // );
      const filter = recipientSelected.filter(cus => cus.customerId !== id);
      console.log('recipientsList>>', filter);
      setRecipientSelected(filter);
    },
    [setFieldValue, values.recipientsList],
  );

洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆 洛雷姆 洛雷姆 洛雷姆 洛雷姆 洛雷姆 洛雷姆 洛雷姆 洛雷姆洛雷姆 洛雷姆 洛雷姆 洛雷姆 洛雷姆 洛雷姆 洛雷姆 洛雷姆 洛雷姆 洛雷姆 洛雷姆 洛雷姆 洛雷姆 洛雷姆 洛雷姆 洛雷姆 洛雷姆 洛雷姆 洛雷姆 洛雷姆 洛雷姆 洛雷姆 洛雷姆 洛雷姆 洛雷姆 洛雷姆 洛雷姆 洛雷姆 洛雷姆 洛雷姆洛雷姆 洛雷姆 洛雷姆 洛雷姆 洛雷姆 洛雷姆 洛雷姆 洛雷姆 洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆洛雷姆

Answer 1

我看到这个函数

handleSelectRecipientBottom

不监听

recipientSelected

值，所以它会接受initiateValue，请将

recipientSelected

添加到dependencyArray然后看看区别