plotly dash - 多按钮回调触发问题

Question

@app.callback(
    [Output('page-content', 'children'),
     Output('dashboard-selection-modal', 'is_open', allow_duplicate=True),
     Output('dashboard-buttons', 'children')],
    [Input('url', 'pathname'), Input('login-button', 'n_clicks')],
    [State('username', 'value'), State('password', 'value')],
    prevent_initial_call=True
)
def display_page(pathname, n_clicks, username, password):
    if not ctx.triggered:
        raise PreventUpdate
    trigger_id = ctx.triggered[0]['prop_id'].split('.')[0]
    if trigger_id == 'login-button' and n_clicks:
        user = dao.authenticate_user(username, password)
        if user:
            login_user(user)
            dashboards = dao.get_dashboards_by_user(current_user.id)
            if len(dashboards) == 1:
                dashboard_module = load_dashboard_module(dashboards[0][1])
                if dashboard_module:
                    return blank_layout, False, []  # Close modal and load the single dashboard immediately
            else:
                dashboard_buttons = [html.Button(dashboard[0], id=json.dumps({'type': 'dashboard-button', 'index': dashboard[1]}), n_clicks=0,
                                                 style={'backgroundColor': '#2c2c2c', 'color': login_color, 'border': f'1px solid {login_color}', 'borderRadius': '5px', 'padding': '10px', 'margin': '10px 0', 'width': '100%', 'cursor': 'pointer'}) for dashboard in dashboards]
                print(f"Dashboard buttons: {dashboard_buttons}")  # Debugging line
                return blank_layout, True, dashboard_buttons  # Replace with blank_layout and open modal on successful login
        return login_layout, False, []
    if pathname in [None, "/", "/login"]:
        return login_layout, False, []
    return 'Please login to view this page.', False, []


@app.callback(
    [Output('dashboard-content', 'children', allow_duplicate=True),
     Output('dashboard-selection-modal', 'is_open')],
    [Input({'type': 'dashboard-button', 'index': ALL}, 'n_clicks')],
    prevent_initial_call=True
)
def render_dashboard_content(n_clicks):
    if not ctx.triggered:
        raise PreventUpdate
    print("render_dashboard_content")  # Debugging line
    trigger_id = json.loads(ctx.triggered[0]['prop_id'].split('.')[0])
    dashboard_name = trigger_id['index']
    print(f"Dashboard button clicked: {trigger_id}")  # Debugging line
    print(f"Dashboard name extracted: {dashboard_name}")  # Debugging line

在上面两个函数的例子中。在我的 app.py 内的 display_page 函数中，我生成了以下按钮：

dashboard_buttons = [html.Button(dashboard[0], id=json.dumps({'type': 'dashboard-button', 'index': dashboard[1]}), n_clicks=0,
                                                     style={'backgroundColor': '#2c2c2c', 'color': login_color, 'border': f'1px solid {login_color}', 'borderRadius': '5px', 'padding': '10px', 'margin': '10px 0', 'width': '100%', 'cursor': 'pointer'}) for dashboard in dashboards]

当我按下其中一个按钮时，什么也没有发生。

render_dashboard_content

函数永远不会被其

触发

[Input({'type': 'dashboard-button', 'index': ALL}, 'n_clicks')]

谁能告诉我我做错了什么？我想我要么格式错误，要么是索引问题..任何帮助将不胜感激。

Answer 1

您不应该

json.dumps()

按钮的复合 id，只需按原样使用字典即可：

dashboard_buttons = [
    html.Button(
        dashboard[0], 
        id={'type': 'dashboard-button', 'index': dashboard[1]}, 
        n_clicks=0,
        style={
            'backgroundColor': '#2c2c2c', 
            'color': login_color, 
            'border': f'1px solid {login_color}', 
            'borderRadius': '5px', 
            'padding': '10px', 
            'margin': '10px 0', 
            'width': '100%', 
            'cursor': 'pointer'
        }
    ) for dashboard in dashboards]