Plotly Dash链式回调报错求助：Div组件不支持options属性

问题场景 #

我编写了以下Plotly Dash代码，需求是从URL的search参数提取project_key，结合下拉框选择的图表类型（bar/pie），最终拿到(project_key, graph_type)组合：

app = Dash(__name__)

app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    dcc.Dropdown(options=['bar', 'pie'], id='dropdown', multi=False, value='bar', placeholder='Select graph type'),
    html.Div(id='page-content'),

])

@app.callback(
    Output('see1', 'options'),
    Input('url', 'search') 
)

def ex_projecKey(search):
    return re.search('project_key=(.*)', search).group(1)

@app.callback(
    Output('page-content', 'children'),
    Input('see1', 'options'),
    Input('dropdown', 'value')
)

def update_page(options, value):
    return f'{options}.{value}'

if __name__ == '__main__':
    app.run_server(debug=True, port=4444)

运行后出现以下错误：

Property "options" was used with component ID:
  "see1"
in one of the Input items of a callback.
This ID is assigned to a dash_html_components.Div component
in the layout, which does not support this property.
This ID was used in the callback(s) for Output(s):
  page-content.children

Property "options" was used with component ID:
  "see1"
in one of the Output items of a callback.
This ID is assigned to a dash_html_components.Div component
in the layout, which does not support this property.
This ID was used in the callback(s) for Output(s):
  see1.options

原本计划第一个回调输出see1的options，第二个回调接收该值，请问错误原因及解决方法？

错误原因 #

1. 组件未定义：代码里根本没在layout中声明ID为see1的组件，Dash找不到对应组件，默认把它识别成html.Div类型（但实际不存在）。
2. 属性不匹配：就算定义了see1为html.Div，Div组件也没有options属性——options是dcc.Dropdown这类表单组件特有的属性，Div只支持children、style等通用属性。

解决方法 #

用Dash专门的**数据存储组件dcc.Store**来传递中间值，它的作用就是在回调之间共享数据，支持任意可JSON序列化的内容，完全适配你的需求。

修改后的完整代码：

import re
from dash import Dash, html, dcc, Input, Output

app = Dash(__name__)

app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    # 添加dcc.Store存储提取的project_key
    dcc.Store(id='project-key-store', data=''),
    dcc.Dropdown(options=['bar', 'pie'], id='dropdown', multi=False, value='bar', placeholder='Select graph type'),
    html.Div(id='page-content'),
])

@app.callback(
    Output('project-key-store', 'data'),
    Input('url', 'search') 
)
def extract_project_key(search):
    # 增加异常处理，避免URL中没有project_key时崩溃
    match = re.search('project_key=(.*)', search)
    return match.group(1) if match else ''

@app.callback(
    Output('page-content', 'children'),
    Input('project-key-store', 'data'),
    Input('dropdown', 'value')
)
def update_page(project_key, graph_type):
    return f'Project Key: {project_key}, Graph Type: {graph_type}'

if __name__ == '__main__':
    app.run_server(debug=True, port=4444)

关键改动说明 #

• 导入并在layout中添加dcc.Store，用于存储提取到的project_key
• 第一个回调将提取结果输出到dcc.Store的data属性
• 第二个回调直接从dcc.Store的data获取project_key，结合下拉框值生成结果
• 增加异常处理，避免URL中无project_key参数时程序崩溃

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