Streamlit数据流理解与表单顺序提交异常问题排查

问题概述 #

• 列表存储3个DataFrame，侧边栏表单展示对应DataFrame的supplier_name与po_number
• 用户修改输入后点击Next，保存的是旧值；切换到同内容的下一个DataFrame时，输入框不刷新为原始值

问题原因 #

1. 变量作用域问题：next_page函数中直接访问的supplier_name和po_number是表单组件初始化时的旧值，Streamlit回调函数执行时机早于表单组件值的更新，无法获取用户修改后的内容。
2. 输入组件状态持久化：Streamlit输入组件默认保留用户输入，当value参数与组件当前状态值相同时，不会触发更新。若两个DataFrame的字段值一致，组件不会自动刷新为新DataFrame的原始值。

解决方案 #

通过session_state绑定输入组件状态，切换页面时主动重置输入框内容为当前DataFrame的值，同时从session_state获取用户提交的最新数据。

修改后的代码 #

import streamlit as st
import pandas as pd

# 3个DataFrame存储在列表中
data1 = {
    "supplier_name": ["S1"],
    "po_number": ["P123"],
}
data2 = {
    "supplier_name": ["S1"],
    "po_number": ["P124"],
}
data3 = {
    "supplier_name": ["S2"],
    "po_number": ["P125"],
}
df1 = pd.DataFrame(data1)
df2 = pd.DataFrame(data2)
df3 = pd.DataFrame(data3)

list1 = [df1, df2, df3]

# 初始化会话状态
if 'page' not in st.session_state:
    st.session_state.page = 0
# 初始化输入框对应的会话状态变量
if 'supplier_name' not in st.session_state:
    st.session_state.supplier_name = list1[st.session_state.page]["supplier_name"][0]
if 'po_number' not in st.session_state:
    st.session_state.po_number = list1[st.session_state.page]["po_number"][0]

def next_page():
    # 从session_state获取用户修改后的最新值
    st.sidebar.write(f"Submitted! supplier_name: {st.session_state.supplier_name} po_number: {st.session_state.po_number}")
    st.session_state.page += 1
    # 切换页面后重置输入框的值为当前DataFrame的内容（防止超出列表长度）
    if st.session_state.page < len(list1):
        st.session_state.supplier_name = list1[st.session_state.page]["supplier_name"][0]
        st.session_state.po_number = list1[st.session_state.page]["po_number"][0]

# 当前页面的DataFrame
current_df = list1[st.session_state.page]

# 主区域展示DataFrame
st.dataframe(current_df)

# 侧边栏表单
with st.sidebar.form("form"):
    # 使用key绑定session_state，让输入框值与会话状态同步
    st.text_input(label="Supplier Name", key="supplier_name")
    st.text_input(label="PO Number", key="po_number")
    # 表单提交按钮
    next_button = st.form_submit_button("Next", on_click=next_page)

关键修改点 #

• 用key参数将输入组件与session_state变量绑定，确保组件值和会话状态实时同步
• 在next_page回调中直接从session_state读取用户修改后的值，规避作用域问题
• 切换页面时主动更新session_state中输入框对应的值，强制组件刷新为当前DataFrame的原始内容

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