Dash点击不同按钮切换图表出现重复回调输出报错如何解决？

报错原因 #

Dash 核心规则限制同一个组件的同一个属性只能在一个回调中被赋值，你现在给graph-content的children属性注册了两个独立回调，因此触发duplicate callback output报错。

推荐解决方案：合并为单回调，通过触发源判断返回内容 #

把两个按钮的点击事件都作为输入放到同一个回调中，通过内置的ctx对象判断哪个按钮被点击，返回对应图表即可，逻辑清晰无状态冲突隐患。
示例代码如下：

# 提前导入依赖
from dash import ctx, dcc
from dash.exceptions import PreventUpdate

@app.callback(
    Output("graph-content", "children"),
    # 两个按钮都作为输入
    Input("KPI_gauge", "n_clicks"),
    Input("comparaison_graph", "n_clicks"),
    prevent_initial_call = True # 初始加载无点击时不触发，省略None判断
)
def render_graph(kpi_click, comp_click):
    # 获取触发当前回调的组件ID
    trigger_id = ctx.triggered_id
    if trigger_id == "KPI_gauge":
        fig1 = KPIGauge(88.7, 102)
        return dcc.Graph(figure=fig1)
    elif trigger_id == "comparaison_graph":
        fig = ComparaisonGraph()
        return dcc.Graph(figure=fig)
    # 无匹配触发源时不更新页面
    raise PreventUpdate

注意事项 #

• 如果你使用的是Dash 2.4以下版本，没有ctx.triggered_id属性，可以替换为ctx.triggered[0]['prop_id'].split('.')[0]获取触发组件ID
• 后续如果需要新增更多按钮切换图表，只需新增对应Input和elif分支即可，维护成本低

可选方案：开启allow_duplicate参数（不推荐） #

Dash 2.0以上版本支持给Output新增allow_duplicate=True参数允许多个回调修改同一个属性，但是容易出现触发顺序不可控的状态冲突问题，仅特殊场景下使用：

@app.callback(
    Output("graph-content", "children", allow_duplicate=True),
    Input("KPI_gauge","n_clicks"),
    prevent_initial_call=True
)
def kpi_gauge(v): 
    fig1 = KPIGauge(88.7,102)
    return [dcc.Graph(figure=fig1)]

@app.callback(
    Output("graph-content", "children", allow_duplicate=True),
    Input("comparaison_graph","n_clicks"),
    prevent_initial_call=True
)
def comparaison_graph(v):
    fig = ComparaisonGraph()
    return [dcc.Graph(figure=fig)]

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