Python plotly Dash更新/刷新布局

Question

我有從第二個模塊導入layout應用程序，然后將app.layout返回此選項卡內容，然后在選項卡中呈現它。 我有一個問題，就是使用默認的輸入值導入布局，當我用鍵填充輸入並在選項卡之間更改時，然后當我單擊返回到“輸入”選項卡時，這些值將重置為默認的“ x”。 我設法通過在回調中第二次聲明布局來解決了這個問題，但這看起來並不好，並且需要編寫兩次布局才能獲得更多功能。 有我的代碼：

if 'manager' not in vars():
    manager = Recognition('xx', 'xx')
    print('defining manager')

lcheck = 0
while lcheck == 0:
    layout = [
        html.Div([
            html.Div(
                [
                    html.H3("Primary API key"),
                    dcc.Input(
                        id='primary-key',
                        value=manager.api_key,
                        placeholder='Enter a value...',
                        type='text',
                        style = {"width":"50%"}
                    ),
                    html.H3("Private API key"),
                    dcc.Input(
                        id='private-key',
                        value=manager.api_secret,
                        placeholder='Enter a value...',
                        type='text',
                        style = {"width":"50%"}
                    ),


                ],
            ),
            html.Button('Submit', id='button', className='btn btn-primary'),
            html.Div(id='output-hidden')
        ])
    ]
    lcheck=1


@app.callback(
    Output('primary-key', 'value'),
    [Input('button', 'n_clicks')],
    [State('primary-key', 'value'), 
     State('private-key', 'value')]
)
def update_output(n_clicks, value1, value2):
    values = {'value1':value1, 'value2':value2}
    global manager
    global layout
    manager.update(value1, value2)
    layout = [
        html.Div([
            html.Div(
                [
                    html.H3("Primary API key"),
                    dcc.Input(
                        id='primary-key',
                        value=manager.api_key,
                        placeholder='Enter a value...',
                        type='text',
                        style = {"width":"50%"}
                    ),
                    html.H3("Private API key"),
                    dcc.Input(
                        id='private-key',
                        value=manager.api_secret,
                        placeholder='Enter a value...',
                        type='text',
                        style = {"width":"50%"}
                    ),


                ],
            ),
            html.Button('Submit', id='button', className='btn btn-primary'),
            html.Div(id='output-hidden')
        ])
    ]

    lcheck=0
    return values['value1']

如您所見，每次我使用按鈕發送新數據時，它都會保存新的布局，但是這種解決方案看起來很糟糕，我想找到一種更好的解決方案，而不會造成代碼混亂。 整個過程是在布局變量中更新value=manager.api_key,和value=manager.api_secret, 。 我當時想從普通list訪問值，但由於它沒有嵌套為常規列表，因此不可能。 有什么方法可以訪問諸如layout.getid("primary-key").value類的layout.getid("primary-key").value ？ 如何清除此代碼？

Answer 1

我已經弄清楚了如何解決這個問題。 當我的應用程序每次選擇一個選項卡時，我們都會渲染app.layout ，因此它始終渲染在首次導入期間分配的layout 。 首先，我想在回調函數中每次都重寫布局，但是將layout=寫兩次是沒有意義的。 所以我在破折號docs找到了一個名為dcc.Store的dash core component （它將json存儲在隱藏的div中）。 我這樣使用它：

html.Div([
        dcc.Store(id='storage')
    ],
            id="hiddendata",
            style={"display": "none"},
    ),

該div直接位於“ Tabs” div之后，並作為“高速緩存”內存供選項卡記住以前的狀態。 最后，我更新了回調以更改dcc.Store數據，每次發送新密鑰時都可以，因此當我離開選項卡時，其他選項卡會知道其中的內容：

@app.callback(
    Output('storage', 'data'),
    [Input('button', 'n_clicks')],
    [State('primary-key', 'value'), 
     State('private-key', 'value')]
)
def update_output(n_clicks, value1, value2):
    values = {'value1':value1, 'value2':value2}
    global manager
    global layout
    manager.update(value1, value2)
    lcheck=0
    return values

@app.callback(
    Output('primary-key', 'value'),
    [Input('storage', 'data')],
    [State('storage', 'data')])
def update_values(values, value):
    if values:
        return value['value1']

@app.callback(
    Output('private-key', 'value'),
    [Input('storage', 'data')],
    [State('storage', 'data')])
def update_values(values, value):
    if values:
        return value['value2']