在本机问题中重新渲染

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()

删除功能末尾的方法。