Streamlit按钮点击异常：点击后显示旧随机数而非新数

问题原因 #

你的问题源于Streamlit的脚本执行顺序机制：每次用户交互（比如点击按钮），整个脚本会从头重新运行一次。原代码中，页面先渲染显示当前随机数，之后才处理按钮点击事件更新current_number。这就导致：

• 第一次点击按钮时，先显示旧数字，再更新current_number，新数字要等下一次交互才会显示
• 再次点击时，响应会错误关联到已经更新的新数字

解决方案 #

调整代码执行顺序，把按钮点击事件的处理逻辑移到数字渲染之前。这样脚本运行时会优先处理按钮交互，更新current_number后再渲染新数字，确保响应和原数字正确关联，同时点击后立即显示新数。

修改后的完整代码 #

import streamlit as st
import random
import json

# 初始化会话状态存储响应数据
if "data" not in st.session_state:
    st.session_state.data = []

# 生成随机数的函数
def get_next_number():
    return random.randint(0, 100)

# 初始化第一个随机数
if "current_number" not in st.session_state:
    st.session_state.current_number = get_next_number()

# 处理用户响应的函数
def store_response(response):
    # 先记录当前显示的旧数字
    current_number = st.session_state.current_number
    st.session_state.data.append({"Number": current_number, "Response": response})
    # 更新为新的随机数
    st.session_state.current_number = get_next_number()

st.title("Random Number Preference App")

# 先处理按钮点击事件
col1, col2 = st.columns(2)
with col1:
    if st.button("Yes"):
        store_response("Yes")

with col2:
    if st.button("No"):
        store_response("No")

# 再渲染当前随机数
st.write(f"Do you like the number **{st.session_state.current_number}**?")

# 显示存储的响应数据
if len(st.session_state.data) > 0:
    st.subheader("User Responses (JSON Format)")
    st.json(st.session_state.data)
    
    # 下载功能
    json_data = json.dumps(st.session_state.data)
    st.download_button(
        label="Download as JSON",
        data=json_data,
        file_name="responses.json",
        mime="application/json"
    )

验证效果 #

1. 初始界面显示随机数，点击"Yes/No"后，页面会立即刷新显示新的随机数
2. 响应数据会正确关联到点击时显示的旧数字，不会出现关联错误的情况

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