如何解决Dash Mantine Switch与dcc.Store的循环依赖问题？

问题场景 #

将Dash Mantine的Switch组件与session级别的dcc.Store关联以实现双向同步时，控制台出现循环依赖错误。

现有代码 #

• dcc.Store初始化：

dcc.Store(id="is_3d", data=False, storage_type="session")

• Switch组件：

dmc.Switch(
    id="switch-3d",
    size="lg",
    radius="sm",
    label="use the new algorithm",
)

• 回调代码：

@callback(Output("switch-3d", "checked"), Input("is_3d", "data"))
def initSwitch(data, n_clicks, checked):
    return data if n_clicks == 1 else checked

@callback(Output("is_3d", "data"), Input("switch-3d", "checked"))
def changeState(checked):
    return checked

错误信息 #

{message: 'Circular Dependencies', html: 'Error: Dependency Cycle Found: is_3d.data -> switch-3d.checked -> is_3d.data'}

解决方案 #

方法一：合并回调，用State避免循环 #

将两个回调合并为一个，通过State获取双方当前值，仅处理真正的触发源，消除循环依赖。

修改后的回调代码：

import dash

@callback(
    Output("is_3d", "data"),
    Output("switch-3d", "checked"),
    Input("is_3d", "data"),
    Input("switch-3d", "checked"),
    State("is_3d", "data"),
    State("switch-3d", "checked"),
    prevent_initial_call=False
)
def sync_switch_and_store(store_data, switch_checked, current_store, current_switch):
    # 触发源为Store数据更新时，同步到Switch
    if store_data is not None and store_data != current_switch:
        return store_data, store_data
    # 触发源为Switch状态变化时，同步到Store
    elif switch_checked is not None and switch_checked != current_store:
        return switch_checked, switch_checked
    # 无变化时返回当前值，避免无效更新
    return dash.no_update, dash.no_update

关键说明：

• prevent_initial_call=False确保页面加载时，Store初始值能同步到Switch
• 用dash.no_update跳过无变化的更新，避免触发循环

方法二：直接初始化Switch，仅保留单向更新回调 #

在渲染Switch时直接设置初始值，只保留Switch更新Store的回调，彻底避免循环。

修改后的布局与回调：

def layout():
    # 若初始值来自session，可在此处先读取session数据
    initial_checked = False
    return html.Div([
        dcc.Store(id="is_3d", data=initial_checked, storage_type="session"),
        dmc.Switch(
            id="switch-3d",
            size="lg",
            radius="sm",
            label="use the new algorithm",
            checked=initial_checked  # 直接绑定初始值
        )
    ])

@callback(
    Output("is_3d", "data"),
    Input("switch-3d", "checked"),
    prevent_initial_call=True
)
def update_store(checked):
    return checked

关键说明：

• 适合初始值固定或可在布局渲染阶段直接获取的场景
• prevent_initial_call=True避免初始化时重复触发回调

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