Plotly Dash：如何在多页应用程序中存储输入数据？

Question

我希望有人能帮助我解决我目前面临的问题。我正在构建一个 3 页的 dash 应用程序，我正在努力使用 dcc.store 组件。

在第一页上有一个输入框，用户可以在其中输入他们的名字。我想存储名称以便我可以在第 2 页上使用它。但出于某种原因，我没有让它按照我想要的方式工作。这是代码：

import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
import dash_core_components as dcc
from dash.dependencies import Input,Output,State
from dash.exceptions import PreventUpdate


#############################################
########### variables & settings ############
#############################################

## app variabelen
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])  
app.config.suppress_callback_exceptions = True
len_data = 3500

#############################################
########### setup app-components ############
#############################################

## header met paginaselecties
navbar = dbc.NavbarSimple(
        children=[
                dbc.NavItem(dbc.NavLink("Login",href="/login"),id='nav_login'),
                dbc.NavItem(dbc.NavLink("Recode",href="/recode"),id='nav_recode'),
        ],
        brand="recode",
        brand_href="/",
        color="primary",               
)

#############################################
############### layout pages ################
#############################################

## layout pagina 1   
page_1 = html.Div([navbar, 
        html.Div([
            html.Div([
                dbc.FormGroup([dbc.Label("Name"),
                               dbc.Input(id="name",
                                         type="text",
                                         placeholder="...")], 
                                         className="m-3"),
                               html.Div(id='output_name')
                    ],style={'width':'40%'}),
                    ]),
                ])


## layout pagina 2
page_2 = html.Div([navbar,
                   html.Div(id='name_output')
                ])

#############################################
################ layout app #################
#############################################

app.layout = html.Div([
        dcc.Store(id='session',
                  data=[{'name':'Leeg'}]),
        dcc.Location(id='url',refresh=False),
        html.Div(id='page-content')
    ])
                        
#############################################
############# callbacks routing #############
#############################################               
@app.callback(Output('page-content','children'),
              [Input('url','pathname')])
def display_page(pathname):
    if pathname == '/login':
        return page_1
    elif pathname == '/recode':
        return page_2

@app.callback(Output('nav_login','active'),
              [Input('url','pathname')])
def set_page_1_active(pathname):
    return pathname == '/login'

@app.callback(Output('nav_recode','active'),
              [Input('url','pathname')])
def set_page_2_active(pathname):
    return pathname == '/recode'


#############################################
################# callbacks  ################
#############################################  

@app.callback(
        Output('session','data'),
        [Input('name','value')])
def return_name(value):
    if value is None:
        raise PreventUpdate
    data = [{'name':value}]
    return data

@app.callback(
        Output('name_output','data'),
        [Input('session','data')])
def print_name(name):
    return name

@app.callback(
        Output('slider_output','children'),
        [Input('slider_select','value')])
def update_slider(value):
    return "You've selected {} from total ({})".format(value,len_data)

if __name__ == "__main__":
    app.run_server(debug=True,port=8050)

希望有人能帮助我。我总是可以使用 hidden-Div 方案，但我真的想使用 dcc.store 以便将来也可以使用它...

谢谢，

Answer 1

dcc.Store() 组件工作正常，问题的根源是 print_name() 回调：

在回调中，您使用 id='name_output' 而不是 'children' [=] 引用 html.Div() 的 'data' 属性 37=] 这是 html.Div() 的内容实际存储的地方；有关详细信息，请参阅 Dash 文档：https://dash.plotly.com/dash-html-components/div.
为了在屏幕上打印输入文本，您需要从 dcc.Store() 组件中保存的数据中提取它，如下所示 name = data[0]['name'] 鉴于 data = [{'name': value}].

如果您根据下面的代码更新 print_name() 回调，您的应用应该可以正常工作。

@app.callback(
    Output('name_output', 'children'),
    [Input('session', 'data')])
def print_name(data):
    name = data[0]['name']
    return name

Plotly Dash：如何在多页应用程序中存储输入数据？

Plotly Dash: How to store input-data in multipage app?

python

plotly-dash