如何让Dash Plotly页面输入变动时自动更新gspread读取的谷歌表格数据

你当前的写法只会在服务端启动渲染布局时读取一次谷歌表格的A6值，输入变动后不会自动重新拉取，需要借助Dash的回调机制实现动态更新，步骤如下：

1. 修改布局，给需要动态更新的H1加ID #

把原来硬编码读取表格值的部分改成带ID的空组件，后续靠回调赋值：

html.Div(className='title', children=[
    # 给需要同步表格A6值的H1加唯一ID，移除静态读取逻辑
    html.H1(id='a6-value', className='headers'),
    html.H2(className='headers', children=[
        'Player Report'
    ]),
    dcc.Input(id='idInput', type='number', placeholder='Enter ID'),
    html.H1(id='my-output', children=[
        'PlaceHolder'
    ])
])

2. 编写回调函数，输入变动时自动拉取最新表格数据 #

回调触发条件绑定输入框idInput的value变动，每次触发时重新调用gspread接口拉取最新数据，再赋值给页面对应组件：

from dash import Input, Output, callback

# 可以根据你的需求加更多Output，比如你要更新的表格、图表组件都可以加在这里
@callback(
    Output('a6-value', 'children'),
    Output('my-output', 'children'),
    Input('idInput', 'value'),
    prevent_initial_call=False # 设为False的话页面首次加载就会触发拉取，不用等输入变动
)
def update_data(input_id):
    # 输入为空时可以返回默认值
    if input_id is None:
        return "默认标题", "请输入ID查询"
    
    # 每次回调触发时重新拉取谷歌表格最新数据
    latest_a6_value = AnalysisDashboard.acell('A6').value
    # 这里可以加你根据input_id拉取对应类型数据的逻辑，生成需要展示的内容
    output_content = f"当前查询ID：{input_id}，对应数据XXX"
    
    # 按Output顺序返回对应的值
    return latest_a6_value, output_content

注意事项 #

• 谷歌表格API有调用频率限制，若输入变动频繁可以给输入框加debounce参数减少触发次数，示例：dcc.Input(id='idInput', type='number', placeholder='Enter ID', debounce=True)，设置后只有用户停止输入后才会触发回调
• 若gspread初始化放在全局，要确保服务端运行时权限有效，不要出现认证过期问题
• 拉取数据耗时较长的话可以配合Dash的加载状态组件提升用户体验

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