Question

如果用户单击“是”从列表中删除项目，我将此代码设置为本机响应。但项目仍然在袋子里，直到刷新它！单击删除后如何重新渲染？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

将列表项置于状态并更新它将呈现列表的状态

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

删除功能结束时的

方法。

在本机问题中重新渲染

4 个答案: