在本機問題中重新渲染

Question

如果用戶單擊“是”以從列表中刪除該項目，我將在React Native中使用此代碼。 但是物品仍然放在包中，直到刷新為止！ 單擊刪除后如何重新渲染？

  const bagProducts = this.props.allProducts; const productId = this.props.deleteProductAction(this.props.id).id; var result = bagProducts.filter(x => { return x.id == productId; })[0]; 

  <TouchableOpacity style={styles.bagItemButtons} onPress={() => { Alert.alert( "Alert", "Are you sure wnat do delete ?", [ { text: "NO", onPress: () => console.log("Cancel pressed") }, { text: "Yes", onPress: () => { bagProducts.splice(result, 1); } } ], { cancelable: true } ); }} > <Text style={styles.bagItemButtonText}>{t("delete")}</Text> </TouchableOpacity> 

Answer 1

將您的列表項置於State並更新狀態以呈現列表

Answer 2

您的bagProducts應該保持在本地狀態，然后運行setState來修改bagProducts。 這將導致重新渲染。

Answer 3

我不知道您是如何渲染bagProducts 。

但是，如果要重新渲染包裝袋，則需要更新狀態。

假設state對象。

添加事件處理程序以更新包，

updateBags=()=>{

    bagProducts.splice(result, 1);

    this.setState(({bagProducts}));
}

在onPress上調用updateBags

onPress: this.updateBags //onPress should be like this.call updateBags

Answer 4

您可以使用

        this.forceUpdate()

刪除功能末尾的方法。