通过警报中的确认反应本机从平面列表中删除项目答案

【问题标题】：react native remove item from flatlist with confirmation in alert通过警报中的确认反应本机从平面列表中删除项目
【发布时间】：2023-03-11 10:01:01
【问题描述】：

我正在尝试从平面列表中删除一个项目，但在删除它之前有一个警告询问“你确定要删除它吗”。

但我不知道该怎么做。

这是警报

<AwesomeAlert
        show={showAlert}
        title="UYARI!"
        message="Are you sure to remove it?"
        closeOnTouchOutside={false}
        closeOnHardwareBackPress={false}
        showCancelButton={true}
        showConfirmButton={true}
        cancelText="Hayır"
        confirmText="Evet"
        confirmButtonColor="#DD5555"
        onCancelPressed={() => {
          setShowAlert(false);
        }}
        onConfirmPressed={() => {
          //what should i do here ? 
          setShowAlert(false);
        }}
      />

这是平面列表渲染项

const barcodeList = barcodeArray => {
    return (
      <View style={styles.ListItemContainer}>
        <Text>-{barcodeArray.item}</Text>
        <TouchableOpacity onPress={() => removeItem(barcodeArray.item)}> 
                                //this removeItem func is remove it without confirmation
          <Text style={{fontSize: 20, fontWeight: 'bold'}}>X</Text>
        </TouchableOpacity>
      </View>
    );
  };

【问题讨论】：

标签： react-native alert react-native-flatlist

【解决方案1】：

根据传递给 removeItem 函数的项目，您可以过滤掉值，然后设置状态。

例如

let filter_elements = item.filter(
item => item.id!= barcodeArray.item.id
);
setState(filter_elements)

【讨论】：

我可以删除项目，但是当用户按下警报的确定按钮时我需要删除它
你在使用 react-native 的 Alert.alert 吗？根据选项你可以触发 removeFunction
我正在使用 awesomeAlert 包。它在那里我如何使用它
只需将上面的 removeItem 函数移动到 AwesomeAlert onConfirmPressed，您可以使用一个状态来存储您按下的元素的 id，然后在运行函数 removeItem(stateId) 时使用该状态
谢谢，我想也许我可以在不使用状态的情况下做到这一点。但是使用状态是完美的

【解决方案2】：

实际上你的 alert 组件应该返回一个 promise。

类似的东西：

const removeItem = id => {
    alert("Are you sure?").then(if(value === "Yes") => {
        // do some stuff here

        
    })
}

您可以编写异步警报。

Can React native Alert wait for user response?

【讨论】：