多页Dash应用dash_table.DataTable persistence与NavLink不兼容问题
问题根因
persistence属性仅对始终挂载在Dash组件树中、未被销毁的组件生效,你当前的实现逻辑存在本质冲突:
- 现有切页逻辑是通过回调直接替换
id=link容器的子元素,跳转到非首页路径时,首页的DataTable、按钮组件会被直接从组件树中卸载销毁,和Tabs组件切换时仅隐藏组件、保留完整实例的逻辑完全不同 - 切回首页时,同ID的DataTable会被重新创建挂载,组件初始化阶段
data属性为空值,会立刻触发表格渲染回调,命中if data == None判断直接返回初始数据集,直接覆盖persistence从存储中读取的历史值 - 把
dcc.Location的refresh参数设为False仅能阻止浏览器触发整页刷新,不会改变Dash自动卸载不在父容器children列表内组件的逻辑,因此无法解决问题。
解决方案
完全满足「不使用dcc.Store、仅靠组件persistence、保留NavLink导航」的要求,核心逻辑和Tabs实现一致:切页时不卸载需要保留状态的组件,仅通过CSS样式控制内容显隐。
修改后的完整可运行代码如下:
import pandas as pd import numpy as np from dash import Dash, callback, html, dcc, dash_table, Input, Output, callback_context as ctx import dash_bootstrap_components as dbc df = pd.DataFrame({'test1':np.zeros(3), 'test2':np.zeros(3)}) def get_data(): return df app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP], suppress_callback_exceptions= True) # 首页布局提前定义,增加id用于显隐控制 main = html.Div(id='main-page', children=[ dbc.Row( dbc.Col([ dbc.Button("test1 +1", id='btn1', className="me-2", n_clicks = 0), dbc.Button("test2 +1", id='btn2', className="me-2", n_clicks = 0) ]) ), dbc.Row([ dbc.Col( dash_table.DataTable(columns = [{'name': x, 'id':x} for x in get_data().columns], id = 'table', persistence = True, persisted_props = ['data'], persistence_type = 'session') ) ]) ]) # 所有页面内容直接写入根布局,不做动态增删 app.layout = dbc.Container([ dcc.Location(id = 'url', refresh = False), dbc.Row( dbc.Navbar( dbc.Nav(children=[ dbc.NavItem(dbc.NavLink("Main", active='exact', external_link=False, href='/'), id = 'main-nav'), dbc.NavItem(dbc.NavLink("A link", active = 'exact', external_link=False, href="/link"), id = 'alink-nav') ]) ) ), html.Div([ main, html.Div(id='other-page-content') ]) ]) @app.callback( [Output('main-page', 'style'), Output('other-page-content', 'style'), Output('other-page-content', 'children')], Input('url', 'pathname') ) def render_page(path): hidden = {'display': 'none'} visible = {'display': 'block'} if path != '/': return hidden, visible, dbc.Row(html.H5(path)) return visible, hidden, None @app.callback( Output('table', 'data'), [ Input('table', 'data'), Input("btn1", "n_clicks"), Input("btn2", "n_clicks") ] ) def render_table(data,b1,b2): print("Data: ", data) if data == None: return get_data().to_dict('records') df = pd.DataFrame(data) button_id = ctx.triggered[0]["prop_id"].split(".")[0] if button_id == 'btn1': df['test1'] += 1 elif button_id == 'btn2': df['test2'] += 1 return df.to_dict('records') app.run_server()
如果使用Dash 2.5+的pages特性,同理不要依赖默认的动态页面容器替换逻辑,把需要持久化状态的页面组件固定挂载在布局中,通过路径匹配控制显隐即可。
内容的提问来源于stack exchange,提问作者FredrikSorum
相关产品推荐
相关产品推荐

