java.lang.IllegalStateException:Can'；t将节点从一个状态树移动到另一个状态树-Vaadin

为什么在关闭web浏览器中的选项卡并再次返回同一URL页面时会出现此错误

错误：

java.lang.IllegalStateException: Can't move a node from one state tree to another. If this is intentional, first remove the node from its current state tree by calling removeFromTree

原因：

java.lang.IllegalStateException: Can't move a node from one state tree to another. If this is intentional, first remove the node from its current state tree by calling removeFromTree

在本例中，是关于vaadin14的，我使用

AppLayout

类来设置其组件

    HorizontalLayout firstRow = new HorizontalLayout(loggerId, calibration, alarm, showSamples, samplingTime);
    HorizontalLayout secondRow = new HorizontalLayout(do0SliderLayout, do1SliderLayout, do2SliderLayout, do3SliderLayout);
    HorizontalLayout thirdRow = new HorizontalLayout(updatePlot, loggingActivate);
    thirdRow.setAlignItems(Alignment.CENTER);
    VerticalLayout layout = new VerticalLayout(firstRow, secondRow, thirdRow, apexChart);
    setContent(layout);

建议：

java.lang.IllegalStateException: Can't move a node from one state tree to another. If this is intentional, first remove the node from its current state tree by calling removeFromTree

我想我需要先清理一下内容，然后才能重新设置布局

问题：

java.lang.IllegalStateException: Can't move a node from one state tree to another. If this is intentional, first remove the node from its current state tree by calling removeFromTree

您知道如何将节点从状态树删除到另一个状态树吗

如何重现错误：

java.lang.IllegalStateException: Can't move a node from one state tree to another. If this is intentional, first remove the node from its current state tree by calling removeFromTree

将此复制到IDE并使用Vaadin 14运行代码。访问路线，然后关闭web浏览器。再次打开web浏览器并再次访问路线。这段代码只是一个简单的例子。我已经移走了很多我能移走的东西

您将遇到以下错误：

更新：

java.lang.IllegalStateException: Can't move a node from one state tree to another. If this is intentional, first remove the node from its current state tree by calling removeFromTree

下面是一个非常简单的代码示例。 我将Vaadin14.2.1与OpenJDK11一起使用

@Route("test")
@CssImport("./styles/shared-styles.css")
@CssImport(value = "./styles/vaadin-text-field-styles.css", themeFor = "vaadin-text-field")
public class TestView extends AppLayout {

    /**
     * 
     */
    private static final long serialVersionUID = 1L;

    static public PaperSlider do0Slider;

    @PostConstruct
    public void init() {

        // Set the slider
        if(do0Slider == null) {
            do0Slider = new PaperSlider(4095);
        }

        setContent(do0Slider);

    }
}

还有瓦丁开发团队的纸张滑块

@Tag("paper-slider")
@NpmPackage(value = "@polymer/paper-slider",
            version = "3.0.1")
@JsModule("@polymer/paper-slider/paper-slider.js")
public class PaperSlider extends AbstractSinglePropertyField<PaperSlider, Integer> {
    /**
     * 
     */
    private static final long serialVersionUID = 1L;

    public PaperSlider(int max) {
        super("value", 0, false);
        this.getElement().setProperty("max", max);
        this.getElement().setProperty("pin", true);
    }

}

使用plot类。我知道Apex Chart是Vaadin的第三个库。但它会产生与纸张滑块相同的错误

@Data
public class Graf {

    private ApexCharts apexChart;
    private XAxis xAxis;

    public Graf() {
        apexChart = ApexChartsBuilder.get()
                .withChart(ChartBuilder.get()
                        .withType(Type.line)
                        .withZoom(ZoomBuilder.get()
                                .withEnabled(true)
                                .build())
                        .withToolbar(ToolbarBuilder.get()
                                .withShow(true)
                                .build())
                        .withAnimations(AnimationsBuilder.get()
                                .withEnabled(false)
                                .build())
                        .build())
                .withLegend(LegendBuilder.get()
                        .withShow(true)
                        .build())
                .withDataLabels(DataLabelsBuilder.get()
                        .withEnabled(false)
                        .build())
                .withColors("#48912c", "#13ebd5", "#215ed9", "#e6c222", "#a524e0", "#633326") // PWM1, PWM2, PMW4, Temp1, Temp2
                .withTooltip(TooltipBuilder.get()
                        .withEnabled(false)
                        .build())
                .withStroke(StrokeBuilder.get()
                        .withCurve(Curve.straight)
                        .build())
                .withTitle(TitleSubtitleBuilder.get()
                        .withText("MySQL")
                        .withAlign(Align.left)
                        .build())
                .withGrid(GridBuilder.get()
                        .withRow(RowBuilder.get()
                                .withColors("#f3f3f3", "transparent")
                                .withOpacity(0.5)
                                .build())
                        .build())
                .withYaxis(YAxisBuilder.get()
                        .withTitle(TitleBuilder.get()
                                .withText("Measurements")
                                .build())
                        .build())
                .withXaxis(XAxisBuilder.get()
                        .withTitle(com.github.appreciated.apexcharts.config.xaxis.builder.TitleBuilder.get()
                                .withText("Time")
                                .build())
                        .withCategories("")
                        .build())
                .withSeries(new Series<>("desktop", 1, 2, 3))
                .build();
            apexChart.setWidthFull();
    }
}

@数据
公共类Graf{
私人阿佩克哈特；
私人XAxis XAxis；
公共Graf（）{
apexChart=ApexChartsBuilder.get（）
.withChart（ChartBuilder.get（）
.withType（Type.line）
.withZoom（ZoomBuilder.get（）
.withEnabled（真）
.build（））
.withToolbar（ToolbarBuilder.get（）
.显示（真实）
.build（））
.withAnimations（AnimationBuilder.get（））
.withEnabled（错误）
.build（））
.build（））
.withLegend（LegendBuilder.get（））
.显示（真实）
.build（））
.withDataLabels（DataLabelsBuilder.get（）
.withEnabled（错误）
.build（））
.带有颜色（“#48912c”、“#13ebd5”、“#215ed9”、“#e6c222”、“#a524e0”、“#633326”）//PWM1、PWM2、PMW4、Temp1、Temp2
.withTooltip（TooltipBuilder.get（）
.withEnabled（错误）
.build（））
.withStroke（StrokeBuilder.get（）
.带曲线（曲线.直线）
.build（））
.withTitle（TitleSubtitleBuilder.get（）
.withText（“MySQL”）
.withAlign（左对齐）
.build（））
.withGrid（GridBuilder.get（）
.withRow（RowBuilder.get（）
.带有颜色（“透明”）
.不透明度（0.5）
.build（））
.build（））
.withYaxis（YAxisBuilder.get（））
.withTitle（TitleBuilder.get（）
.withText（“测量值”）
.build（））
.build（））
.withXaxis（XaxiBuilder.get（）
.withTitle（com.github.approveded.apexcharts.config.xaxis.builder.TitleBuilder.get（））
.withText（“时间”）
.build（））
.带类别（“”）
.build（））
.withSeries（新系列（“桌面”，1、2、3））
.build（）；
apexChart.setWidthFull（）；
}
}

一个已在Vaadin 14.2.1中修复。

一个已在Vaadin 14.2.1中修复。

我有Vaadin 14.2.1，错误仍然出现。请注意，我有一些静态字段显示在布局中！贾格哈尔斯卡帕特电视台（Java exempel Minima of dig som du kan köra.）我担心Vaadin不支持在静态字段中存储组件，因为这意味着它属于多个UI，可以由多个用户同时修改。如果希望所有用户都能看到相同的数据，请尝试将数据存储在静态字段中，然后为每个访问者重新构建组件。只要线程可以在web浏览器关闭的同时运行，那么我想我可以将绘图及其设置设置为公共的，而不是静态的。我有Vaadin 14.2.1，错误仍然会出现。请注意，我有一些静态字段显示在布局中！贾格哈尔斯卡帕特电视台（Java exempel Minima of dig som du kan köra.）我担心Vaadin不支持在静态字段中存储组件，因为这意味着它属于多个UI，可以由多个用户同时修改。如果希望所有用户都能看到相同的数据，请尝试将数据存储在静态字段中，然后为每个访问者重新构建组件。只要线程可以在web浏览器关闭的同时运行，那么我想我可以将绘图及其设置设置设置为公共的，而不是静态的。