R Shiny动态添加Plotly图表时reactiveValues引发UI异常求助

我用bslib开发了一个简易R Shiny演示应用，功能如下：

• 用户可选择mtcars数据集的一个或多个变量，为每个变量生成Plotly图表
• 每个动态生成的图表可通过侧边栏selectInput设置标记颜色
• 用reactiveValues存储颜色选择，避免增删图表时颜色重置为默认值

但出现UI异常，触发步骤：

1. 选择任意变量生成若干图表
2. 修改第一个图表的标记颜色（可正常生效）
3. 将第一个卡片切换至全屏模式
4. 在全屏模式下再次修改该图表的标记颜色，此时全屏视图崩溃，且卡片的全屏控制按钮消失

问题原因 #

核心问题是动态UI的过度重渲染与bslib全屏状态的冲突：

• renderUI("content")同时依赖input$select和storage$color，当颜色选择变化时，会触发整个卡片UI的重新创建
• 卡片处于全屏状态时，重新渲染DOM会破坏bslib维护的全屏结构，导致UI异常

修复方案 #

调整逻辑，让卡片结构仅在变量增删时渲染，颜色选择器的状态更新不触发整个UI重绘：

1. 将颜色选择器的selected值改为用独立逻辑初始化，避免直接在renderUI中依赖storage$color触发重绘
2. 优化observe逻辑，仅在变量新增时初始化颜色存储，避免不必要的赋值操作
3. 让Plotly图表直接响应颜色选择器的输入，storage仅用于保存状态，避免增删时颜色重置

修复后的代码 #

# packages
library(shiny)
library(bslib)
library(plotly)

# clean environment
rm(list = ls())

data = data.frame(head(mtcars, 100))
choices = colnames(data)
choices = choices[-c(1)]

ui <- bslib::page_navbar(
  bslib::nav_panel(
    title = "Tab 1",
    fillable = FALSE,
    bslib::layout_sidebar(
      sidebar = bslib::sidebar(
        "Sidebar",
        shiny::selectizeInput(
          "select",
          "Choose",
          multiple = TRUE,
          selected = character(0),
          choices = choices
        )
      ),
      shiny::uiOutput("content")
    )
  )
)

server <- function(input, output) {
  
  storage <- reactiveValues(color = list())
  
  # 仅在变量增删时初始化/清理颜色存储
  observeEvent(input$select, {
    # 为新增变量设置默认颜色
    new_vars <- setdiff(input$select, names(storage$color))
    lapply(new_vars, function(var) {
      storage$color[[var]] <- choices[1]
    })
    # 删除已移除变量的存储
    removed_vars <- setdiff(names(storage$color), input$select)
    lapply(removed_vars, function(var) {
      storage$color[[var]] <- NULL
    })
  }, ignoreNULL = FALSE)
  
  output$content <- shiny::renderUI({
    req(input$select)
    output_list <- lapply(input$select, function(parameter) {
      bslib::card(
        height = "400",
        full_screen = TRUE,
        bslib::card_header(
          shiny::textOutput(paste0("title_", parameter))
        ),
        bslib::layout_sidebar(
          sidebar = bslib::sidebar(
            shiny::selectInput(
              paste0("select_color_", parameter),
              "Marker color",
              choices = choices,
              selected = storage$color[[parameter]]
            )
          ),
          plotlyOutput(paste0("plot_", parameter))
        )
      )
    })
    do.call(tagList, output_list)
  })
  
  # 渲染标题和图表，颜色变化直接响应input
  observe({
    req(input$select)
    lapply(input$select, function(parameter) {
      output[[paste0("title_", parameter)]] <- shiny::renderText({
        paste0("Plot ", parameter)
      })
      output[[paste0("plot_", parameter)]] <- renderPlotly({
        color_var <- input[[paste0("select_color_", parameter)]]
        plot_ly(
          data,
          x = ~mpg,
          y = ~data[[parameter]],
          color = ~data[[color_var]],
          type = 'scatter',
          mode = 'markers'
        )
      })
    })
  })
  
  # 同步颜色选择到storage，仅用于保存状态
  observe({
    req(input$select)
    lapply(input$select, function(parameter) {
      if (!is.null(input[[paste0("select_color_", parameter)]])) {
        storage$color[[parameter]] <- input[[paste0("select_color_", parameter)]]
      }
    })
  })
  
})

shinyApp(ui = ui, server = server)

关键改进点 #

• 用observeEvent(input$select)专门处理变量增删时的颜色初始化和清理，避免不必要的存储操作
• renderUI仅依赖input$select，仅在变量变化时生成卡片，颜色选择器的初始值从storage获取，后续变化直接由input驱动，不会触发UI重绘
• 图表直接响应颜色选择器的input，同时storage同步保存选择状态，保证增删图表时颜色不重置

内容的提问来源于stack exchange，提问作者vaely