Python plotly Dash 更新/刷新布局

Question

Python plotly Dash 更新/刷新布局

5

我有一个应用程序，从第二个模块中导入layout，然后将其呈现在选项卡中，作为返回到此选项卡内容的app.layout。我遇到的问题是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或类似这样的东西？如何清理这段代码？

- tookas92

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tookas92 · Accepted Answer

我已经想出了如何解决这个问题。因为我的应用程序在每次选择标签时都会呈现app.layout，所以它总是呈现在第一次导入时分配的layout。起初，我想在回调函数中每次覆盖布局，但写两次layout=没有意义。所以我在dash docs中找到了一个名为dcc.Store的dash core component（它将JSON存储在隐藏的

中）。我像这样使用它：

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']