如何解决Streamlit AgGrid新增行编辑后消失的问题？

核心错误原因 #

• GridOptions未同步更新：点击添加按钮后重新创建了GridOptionsBuilder实例，但未将构建后的新配置赋值给gridOptions，导致AgGrid始终使用初始配置，新增行的编辑规则不匹配，触发数据异常。
• 按钮状态逻辑冗余：button_state设置为True后持续生效，导致每次页面刷新（包括编辑行触发的刷新）都会重复添加新行，旧的新增行数据未正确同步，最终编辑时被覆盖。
• 数据流与Session State混乱：现有代码中优先从session_state读取数据并覆盖CSV，同时reload_data=True强制AgGrid从原始DF加载数据，导致编辑状态丢失。
• 语法错误：代码中使用了中文引号“data.csv”，会导致文件路径识别失败。

修正后的代码 #

import pandas as pd
import streamlit as st
import os
from st_aggrid import AgGrid, GridUpdateMode
from st_aggrid.grid_options_builder import GridOptionsBuilder

def data_upload():
    # 处理初始无CSV文件的情况
    if not os.path.exists("data.csv"):
        return pd.DataFrame(columns=['CollaboratorName', 'Location', "HourlyRate"])
    return pd.read_csv("data.csv")

# 用session_state统一维护核心数据
if 'df' not in st.session_state:
    st.session_state['df'] = data_upload()

df = st.session_state['df']

# 每次渲染都基于当前数据构建GridOptions
gd = GridOptionsBuilder.from_dataframe(df)
gd.configure_column("Location", editable=True)
gd.configure_column("HourlyRate", editable=True)
gd.configure_column("CollaboratorName", editable=True)
gridOptions = gd.build()

# 添加行按钮逻辑
button = st.sidebar.button("Add Line")
if button:
    new_row = pd.DataFrame([['', '', 0]], columns=['CollaboratorName', 'Location', "HourlyRate"])
    df = pd.concat([df, new_row], axis=0, ignore_index=True)
    st.session_state['df'] = df
    df.to_csv("data.csv", index=False)

# 渲染AgGrid组件
grid_table = AgGrid(
    df,
    gridOptions=gridOptions,
    fit_columns_on_grid_load=True,
    height=500,
    width='100%',
    theme="streamlit",
    key='unique',
    update_mode=GridUpdateMode.GRID_CHANGED,
    reload_data=False,  # 关闭强制重载，依赖session_state维护数据状态
    editable=True
)

# 处理编辑后的同步更新
if grid_table['data'] is not None:
    updated_df = pd.DataFrame(grid_table['data'])
    if not updated_df.equals(st.session_state['df']):
        st.session_state['df'] = updated_df
        updated_df.to_csv("data.csv", index=False)

关键修改说明 #

1. 统一数据管理：将DataFrame存储在st.session_state['df']中，确保页面刷新、编辑、添加行操作时数据一致，避免CSV读写冲突。
2. 同步GridOptions：每次页面渲染都基于当前最新的DataFrame构建GridOptions，确保新增行的编辑配置生效。
3. 简化按钮逻辑：移除冗余的button_state，仅在按钮点击时执行添加行操作，避免重复新增。
4. 关闭强制重载：设置reload_data=False，防止AgGrid覆盖编辑后的状态。
5. 修复语法错误：将中文引号替换为英文引号，确保文件操作正常。
6. 初始状态兼容：处理首次运行无CSV文件的情况，自动创建空DataFrame避免报错。

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