Plotly Dash Callback error : Trying to hide Div components

Question

我试图在单击 link 后隐藏输入组件 Div。

我已经给出 Div id='input_fields'，这样我就可以隐藏它的子组件，但是在 return app1.layout, {'display': 'none'} 上我得到以下错误。

"Callback error updating display-page.children, input_fields.children"

Class

app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Br(),
    html.H1("Interpretation of Financial Statements", style={'text-align': 'center'}),
    html.H1("10 year data analysis", style={'text-align': 'center'}),
    html.Div([dcc.Input(id='input-1-state', type='text', placeholder="Enter Company Ticker", value=''),
              dcc.Input(id='input-2-state', type='text', placeholder="Enter Company Name", value=''),
              dcc.Link(' Get Analytics ', href='/apps/app1')], id='input_fields'),
    html.Div(id='display-page'),

], style={"margin-left": "5%", "margin-right": "5%"})


@app.callback(Output('display-page', 'children'),
              Output('input_fields', 'children'),
              [Input('url', 'pathname')],
              Input(component_id='input-1-state', component_property='value'),
              Input(component_id='input-2-state', component_property='value'))
def display_page(pathname, ticker, company):
    if pathname == '/apps/app1':

        # generate links
        linkGenerator.generateLinks(ticker, company)

        # starting crawler
        startingCrawlerClass()

        return app1.layout, {'display': 'none'}
    else:
        return ''

Answer 1

问题出在回调中 else 子句的 return 语句。您的回调需要两个回调输出，但您 return 一个（即单个空字符串）。

如果您运行处于调试模式的应用程序 Dash 会告诉您这一点以及它希望您做什么 return 相反：

dash.exceptions.InvalidCallbackReturnValue: The callback ..display-page.children...input_fields.children.. is a multi-output. Expected the output type to be a list or tuple but got: ''.

所以你可以这样做：

@app.callback(
    Output("display-page", "children"),
    Output("input_fields", "style"),
    [Input("url", "pathname")],
    Input(component_id="input-1-state", component_property="value"),
    Input(component_id="input-2-state", component_property="value"),
)
def display_page(pathname, ticker, company):
    if pathname == "/apps/app1":
        return app1.layout, {"display": "none"}
    else:
        return '', {'display': 'block'}

所以上面的例子return是一个包含两个元素的元组。每个元素对应一个回调输出。 input-field 的输出也是 style

Plotly Dash Callback error : Trying to hide Div components

Plotly Dash Callback error : Trying to hide Div components

python

plotly

plotly-dash