Python Dash多布局通信及跨页存储数据传递到主布局问题咨询

核心解决思路 #

不需要在两个页面布局里分别加dcc.Store，直接在顶层全局布局（url_bar_and_content_div）里加一个全局共享的dcc.Store组件即可，这个组件不会随页面切换销毁，所有页面的回调都可以读写它的内容，完全满足跨页面传值需求。

具体实现步骤 #

步骤1：修改顶层布局，添加全局存储组件 #

在你已有的url_bar_and_content_div里新增dcc.Store，存储类型选memory即可，符合离线单会话临时存储的需求：

url_bar_and_content_div = html.Div([
    dcc.Location(id='url', refresh=False),
    # 新增全局共享存储组件，全页面可读写
    dcc.Store(id='shared-data', storage_type='memory', data={}),
    html.Div(id='page-content')
])

同时记得把这个新增的组件也加入validation_layout里，避免回调校验报错。

步骤2：编写提交按钮回调，实现数据存储+页面跳转 #

这个回调负责在点击页面2的提交按钮时，把你需要的文本、表格数据打包存入全局Store，同时自动跳回页面1：

@app.callback(
    [Output('url', 'href'),
     Output('shared-data', 'data')],
    Input('submit-btn-p2', 'n_clicks'), # 替换成你页面2提交按钮的id
    [State('textarea-p2', 'value'),
     State('datatable-p2', 'data'),
     State('shared-data', 'data')],
    prevent_initial_call=True
)
def submit_and_redirect(n_clicks, textarea_val, datatable_data, shared_data):
    # 打包要传递的数据，只能存JSON可序列化格式，DataFrame直接转成dict即可
    shared_data['submitted_text'] = textarea_val
    shared_data['submitted_table'] = datatable_data # 已经是DataTable原生的list[dict]格式，可直接转pd.DataFrame使用
    # 跳转回页面1，替换成你页面1的实际路径，比如'/'
    return '/', shared_data

步骤3：编写页面1的展示回调，加载传递过来的数据 #

这个回调在进入页面1时触发，读取全局Store里的存储内容，渲染到data-display组件：

@app.callback(
    Output('data-display', 'children'),
    Input('url', 'pathname'),
    State('shared-data', 'data'),
    prevent_initial_call=False
)
def show_submitted_data(pathname, shared_data):
    # 只有进入页面1路径时才渲染数据
    if pathname != '/': # 替换成你页面1的实际路径
        return []
    # 没有提交数据时返回空
    if not shared_data or 'submitted_text' not in shared_data:
        return []
    # 组装展示内容，可根据需求调整格式
    display_content = [
        html.P("提交的文本内容："),
        html.Pre(shared_data['submitted_text']),
        html.Hr(),
        html.P("提交的表格数据：")
    ]
    # 如果需要把表格转成pd.DataFrame处理，直接用pd.DataFrame(shared_data['submitted_table'])即可
    # 这里演示直接把表格内容转成文本展示
    table_df = pd.DataFrame(shared_data['submitted_table'])
    display_content.append(html.Pre(table_df.to_string()))
    return display_content

常见疑问解答 #

• 现有update_data_display回调不需要做任何修改，它是页面2内部的交互逻辑，和跨页传值完全独立
• 不需要在两个页面布局里各加dcc.Store，全局加一个即可，id唯一不需要重复
• 存储类型选memory即可，不需要用local或session，它是当前标签页内存存储，关闭标签自动清空，完全适配你离线临时传值的需求
• 不需要做额外的组件关联，全局的dcc.Store对所有回调可见，直接读写它的data属性即可实现双向数据传递

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