Plotly Dash点击按钮添加交互变量数据行报错及优化咨询

问题原因分析 #

你遇到的AttributeError: 'str' object has no attribute 'value'及代码逻辑错误主要来自三点：

1. 列ID与数据键不匹配：DataTable定义的列ID是['TR', 'BR']，但新增行用'Top'、'Base'作为键，导致数据无法正确绑定到表格列，触发渲染错误。
2. 错误获取现有表格数据：试图通过dash.callback_context.outputs_list[0]['data']获取当前表格数据是错误用法——outputs_list仅存储输出组件的ID和属性信息，不包含数据内容；且current_data变量未定义就使用，引发语法逻辑错误。
3. 冗余的点击次数存储：单独用dcc.Store存储点击次数完全多余，直接使用按钮的n_clicks作为回调输入即可。

修复后的可运行代码 #

import dash
from dash import html, dash_table as dt, callback, Input, Output, State
import dash_bootstrap_components as dbc

app = dash.Dash(external_stylesheets=[dbc.themes.CERULEAN])

app.layout = html.Div([
    # 输入框
    dbc.Row(dbc.InputGroup([
        dbc.InputGroupText("Top"), 
        dbc.Input(id='T', placeholder="Project Name")
    ], className="mb-3")),
    dbc.Row(dbc.InputGroup([
        dbc.InputGroupText("Base"), 
        dbc.Input(id='B', placeholder="Project Name")
    ], className="mb-3")),
    
    # 添加按钮
    dbc.Row([
        html.Div([
            dbc.Button(
                "Add current data to sensitivity table", 
                id='add-row', 
                style={'font-family':'arial','marginTop':'5px','marginRight':'10px'}, 
                className="d-grid gap-2 col-8", 
                size="sm"
            ),
        ])
    ]),
    
    # 表格（移除冗余的button-clicks存储）
    dbc.Row([
        dt.DataTable(
            id='sensitivity',
            columns=[{'name': col, 'id': col} for col in ['Top', 'Base']],  # 列ID与数据键匹配
            data=[]
        ),
    ]),
])

@callback(
    Output('sensitivity','data'),
    Input('add-row', 'n_clicks'),
    State('T', 'value'),
    State('B', 'value'),
    State('sensitivity', 'data'),  # 直接传入当前表格数据作为State
    prevent_initial_call=True  # 初始渲染不触发回调
)
def add_row_to_table(n_clicks, T, B, current_data):
    # 过滤空输入（可选）
    if not T or not B:
        return current_data
    
    # 构造新行
    new_row = {'Top': T, 'Base': B}
    # 追加新行到现有数据
    updated_data = current_data + [new_row]
    return updated_data

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

优化说明 #

1. 移除冗余组件：删掉不必要的dcc.Store，直接用按钮n_clicks作为输入，通过prevent_initial_call=True避免初始渲染触发回调。
2. 直接获取现有数据：将表格的data属性作为State传入回调，安全获取当前表格内容，无需依赖callback_context的错误用法。
3. 输入校验（可选）：添加空输入过滤，避免插入空行。
4. 列与数据键统一：让DataTable的列ID和新增行的键保持一致，确保数据正确渲染。

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