Streamlit AgGrid表格添加新行异常：点击按钮生成重复表格

问题根源 #

Streamlit每次交互（比如点击按钮）都会重新执行整个脚本，要是没做状态管理，每次点击后会重新加载初始数据并渲染新表格，自然就会出现两个表。

解决方案：用Session State维护数据状态 #

通过st.session_state保存DataFrame的最新状态，确保每次交互后更新的是同一个数据集，只渲染一次表格。

完整可运行代码 #

import streamlit as st
from st_aggrid import AgGrid, GridOptionsBuilder
import pandas as pd

# 替换成你的SQL查询逻辑
def get_data():
    return pd.DataFrame({
        "ID": [1, 2, 3],
        "Name": ["Alice", "Bob", "Charlie"],
        "Age": [25, 30, 35]
    })

# 初始化会话状态里的DataFrame
if "df" not in st.session_state:
    st.session_state.df = get_data()

# 批量添加行的函数
def add_rows(num_rows=1):
    # 创建和原表列一致的空行
    empty_row = pd.DataFrame([[None]*len(st.session_state.df.columns)], columns=st.session_state.df.columns)
    # 生成多行重复数据
    new_rows = pd.concat([empty_row]*num_rows, ignore_index=True)
    # 合并到现有数据
    st.session_state.df = pd.concat([st.session_state.df, new_rows], ignore_index=True)

# 操作控件区
st.sidebar.title("操作面板")
add_count = st.sidebar.number_input("添加行数", min_value=1, max_value=10, value=1)
if st.sidebar.button("添加行"):
    add_rows(add_count)

# 配置AgGrid选项
gb = GridOptionsBuilder.from_dataframe(st.session_state.df)
gb.configure_default_column(editable=True)  # 允许单元格编辑（可选）
grid_options = gb.build()

# 渲染AgGrid并获取编辑后的数据
grid_result = AgGrid(
    st.session_state.df,
    gridOptions=grid_options,
    update_mode="MODEL_CHANGED",
    height=400,
    width="100%"
)

# 更新会话状态里的DataFrame（同步用户编辑内容）
st.session_state.df = grid_result["data"]

# 保存到CSV功能
if st.button("保存数据到CSV"):
    st.session_state.df.to_csv("updated_data.csv", index=False)
    st.success("数据已保存到updated_data.csv")

# 示例：用更新后的数据绘图
st.subheader("数据可视化示例")
st.bar_chart(st.session_state.df.set_index("Name")["Age"])

关键细节说明 #

• 会话状态初始化：脚本第一次运行时加载SQL数据到st.session_state.df，后续交互都直接用这个变量，不会重复加载初始数据。
• 添加行逻辑：生成和原表列匹配的空行，合并后直接更新会话状态里的DataFrame，确保所有后续操作都基于最新数据。
• AgGrid渲染：始终基于st.session_state.df渲染表格，每次交互后只会更新这一个表格，不会生成新的。
• 编辑同步：通过update_mode="MODEL_CHANGED"捕获用户在表格里的编辑操作，实时更新会话状态中的数据，保证数据一致性。

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