破折号异常 InvalidCallbackReturnValue答案

【问题标题】：dash exceptions InvalidCallbackReturnValue破折号异常 InvalidCallbackReturnValue
【发布时间】：2021-12-02 18:42:21
【问题描述】：

我知道可能有人会问这个问题，但我找不到适合我的问题的解决方案。我正在尝试构建一个多布局仪表板应用程序。

每次单击不同的选项卡（我有 3 个）时，我都想更改布局（包含 dcc.Graphs 和 dbc.Card）。问题是我在运行代码时遇到了这个异常： "dash.exceptions.InvalidCallbackReturnValue：<Output content.children>的回调返回类型为Dash 的值这不是 JSON 可序列化的。 "

下面是我的代码：

import dash_bootstrap_components as dbc
import base64
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
from DashFriends import friends_layout
from DashUser import user_layout
from FriendsUserApp import userfriends_layout


app = dash.Dash(__name__, suppress_callback_exceptions=True, external_stylesheets=[dbc.themes.MINTY],
                meta_tags=[{'name': 'viewport',
                            'content': 'width=device-width, initial-scale=1.0'}]
                )
colors = {
    'background': '#ffffff',
    'text': '#4d94ff',
    'plot': '#D1D0CE',
    'textfig': '#000000'
}

app_tabs = html.Div(
    [
        dbc.Tabs(
            [
                dbc.Tab(label="My friends", tab_id="tab-friends", labelClassName="text-success font-weight-bold",
                        activeLabelClassName="text-danger"),
                dbc.Tab(label="Just me", tab_id="tab-user", labelClassName="text-success font-weight-bold",
                        activeLabelClassName="text-danger"),
                dbc.Tab(label="My Friends and I", tab_id="tab-userfriends",
                        labelClassName="text-success font-weight-bold",
                        activeLabelClassName="text-danger")
            ],
            id="tabs",
            active_tab="tab-user",
        ),
    ], className="mt-3"
)

app.layout = html.Div(style={'backgroundColor': colors['background']}, children=[
    html.H1(
        children='Twitter User Analysis',
        style={
            'textAlign': 'center',
            'font-family': 'Garamond',
            'font-weight': 'bold',
            'color': colors['text']
        }
    ),
    html.Div(children='Get an analysis of a user', style={
        'textAlign': 'center',
        'font-family': 'Garamond',
        'font-weight': 'bold',
        'color': colors['text']
    }),
    html.Br(),
    html.Hr(),
    dbc.Row(dbc.Col(app_tabs, width=12), className="mb-3"),
    html.Br(),
    html.Div(id='content', children=[])
])



@app.callback(
    Output(component_id="content", component_property="children"),
    [Input(component_id="tabs", component_property="active_tab")]
)

def switch_tab(tab_chosen):
    if tab_chosen == "tab-friends":
        return friends_layout
    elif tab_chosen == "tab-user":
        return user_layout
    elif tab_chosen == "tab-userfriends":
        return userfriends_layout
    return html.P("This shouldn't be displayed for now...")


if __name__ == '__main__':
    app.run_server(debug=True)

【问题讨论】：

标签： python callback plotly-dash dashboard

【解决方案1】：

问题出在您尚未共享的代码中，而是基于错误

dash.exceptions.InvalidCallbackReturnValue：<Output content.children> 的回调返回类型为Dash 的值这不是 JSON 可序列化的。

您在 switch_tab 回调中返回的布局之一返回 Dash 应用程序的实例。

你不能这样做：

一般来说，Dash 属性只能是破折号组件，字符串，字典，数字，无，或这些列表。

【讨论】：