Streamlit中按钮点击两次后组件消失的问题求助

问题根源 #

你遇到的组件循环显示/消失问题，核心是Streamlit渲染机制+按钮key频繁变更导致的状态混乱：

• Streamlit每次交互都会重新运行整个脚本，按钮的点击状态靠key和会话状态跟踪。
• 你在if process_btn:块里先后用key=2和key=3替换占位符里的按钮，导致下一次渲染时Streamlit无法正确识别按钮的状态，第二次点击时process_btn返回False，组件自然就不显示了。

解决方案 #

用Streamlit的session_state统一管理处理状态和结果，避免频繁替换按钮。核心思路：

1. 用会话状态标记是否正在处理、存储操作结果
2. 按钮的禁用状态直接绑定到处理状态，不用更换key
3. 仅当存在结果时展示组件

修正后的代码 #

import streamlit as st
import streamlit.components.v1 as stc

def very_heavy_operation():
    # 模拟耗时操作，可替换为实际逻辑
    import time
    time.sleep(2)
    return f'新结果：{st.session_state.get("count", 0) + 1}'

def main():
    # 初始化会话状态变量
    if "is_processing" not in st.session_state:
        st.session_state.is_processing = False
    if "result" not in st.session_state:
        st.session_state.result = None
    if "count" not in st.session_state:
        st.session_state.count = 0

    # 按钮禁用状态直接绑定到处理状态
    process_btn = st.button('process', disabled=st.session_state.is_processing)

    if process_btn:
        st.session_state.is_processing = True
        # 显示加载提示
        with st.spinner('处理中...'):
            # 执行耗时操作并保存结果
            st.session_state.result = very_heavy_operation()
            st.session_state.count += 1
        st.session_state.is_processing = False

    # 有结果时才展示组件
    if st.session_state.result is not None:
        stc.html(f'<div>{st.session_state.result}</div>', height=100, scrolling=True)
        
if __name__ == '__main__':
    main()

代码说明 #

• session_state.is_processing：标记当前是否在执行耗时操作，直接控制按钮禁用状态，无需反复替换按钮
• session_state.result：存储耗时操作的结果，确保每次点击后都能保留并展示最新内容
• st.spinner：替代手动加载文本，更贴合Streamlit的交互规范
• count变量确保每次点击都返回新结果，满足需求

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