Vaadin Grid 中的可点击图标在每次调用 setItems() 后多次执行代码答案

【问题标题】：Clickable icon in Vaadin Grid executes code multiple times after each call of setItems()Vaadin Grid 中的可点击图标在每次调用 setItems() 后多次执行代码
【发布时间】：2022-01-17 20:27:07
【问题描述】：

在我的 Vaadin 应用程序中，我显示了一个 Grid，其中包含自定义类 Transaction 的项目。这个网格应该是这样的：

它应包含一个“操作”列，该列又应包含一个或多个图标。为简单起见，我们只考虑一个图标。
这些图标中的每一个都应该是可点击的。
点击一个图标，一些代码将在当前行的Transaction项下执行。在这里，一个简单的Notification.show()。

我设法用以下代码实现了这一点：

private final Grid<Transaction> transactionGrid = new Grid<>(Transaction.class, false);
transactionGrid.setItems(transactionService.getItems());

transactionGrid.addColumn(getActionsRenderer()).setHeader("Actions").setAutoWidth(true);

private ComponentRenderer<Icon, Transaction> getActionsRenderer() {
    final Icon replyIcon = new Icon(VaadinIcon.ENVELOPE);
    return new ComponentRenderer<>(transaction -> {
        replyIcon.addClickListener(event -> Notification.show(transaction.getOrderNumber()));
        return replyIcon;
    });
}

单击图标会显示带有交易orderNumber 的通知。问题如下：

该应用程序还提供了一个“重新加载”按钮，该按钮仅执行以下操作：

refreshIcon.addClickListener(event -> {
    final List<Transaction> transactions = transactionService.getItems();
    transactionGrid.setItems(transactions);
});

单击刷新图标后，单击行的replyIcon 会显示相同数据的三个通知。下一次刷新后，它会显示 5 个，然后是 7 个，以此类推。

所以看起来每次刷新都会添加两个注册相同点击监听器的“组件”。调试的时候可以看到eventBus上面有多个ClickEvent但是不知道从哪里来的。

【问题讨论】：

标签： vaadin vaadin-flow vaadin-grid vaadin14

【解决方案1】：

我的错误是在new ComponentRenderer<> 语句之外定义图标。将代码更改为此似乎可以解决问题：

private ComponentRenderer<Icon, Transaction> getActionsRenderer() {
    return new ComponentRenderer<>(transaction -> {
        final Icon replyIcon = new Icon(VaadinIcon.ENVELOPE);
        replyIcon.addClickListener(event -> Notification.show(transaction.getOrderNumber()));
        return replyIcon;
    });
}

【讨论】：