Python Streamlit组件重复功能异常：原因排查与解决方案

1. 滑块被渲染到页面顶部 #

Streamlit的组件遵循自上而下的顺序渲染逻辑，你通过按钮on_click直接调用create_component()时，这个函数的执行会脱离页面的初始渲染流程，新生成的组件会被追加到页面内容的最前端，而非原组件的下方。

2. 仅能复制一次 #

• 按钮使用了随机key：每次页面渲染都会生成全新的按钮key，导致按钮实例被频繁重建，之前的点击状态无法被正确追踪。
• 缺少状态管理：没有用Streamlit的session_state记录需要渲染的组件数量，点击按钮后没有触发页面重新渲染并生成新组件的逻辑。

核心思路是用st.session_state管理组件数量，点击按钮仅修改状态值，页面根据状态值循环渲染对应数量的组件，同时给每个组件设置唯一且固定的key：

import streamlit as st

# 初始化会话状态，记录组件组数量
if "component_count" not in st.session_state:
    st.session_state.component_count = 1

def add_component():
    # 点击按钮时仅增加组件计数，触发页面重渲染
    st.session_state.component_count += 1

if __name__ == '__main__':
    # 页面基础布局
    st.markdown("# Chapters and Methods")
    st.sidebar.markdown("# Chapters and Methods")

    slider1 = st.slider('Chapter 1 Method', 0, 3)

    # 根据会话状态中的计数，循环渲染组件组
    for i in range(st.session_state.component_count):
        col_slider, col_add = st.columns(2)
        with col_slider:
            # 用索引作为key的一部分，保证唯一且固定
            st.slider(f'Chapter 2 Method {i+1}', 0, 4, key=f'method_slider_{i}')
        
        # 仅在最后一组组件显示加号按钮
        if i == st.session_state.component_count - 1:
            with col_add:
                st.button("➕", help="See more", on_click=add_component, key="add_btn", use_container_width=True)
        
        st.slider(f"Chapter 2 Step {i+1}", 0, 5, key=f'step_slider_{i}')

• 状态管理：用st.session_state.component_count记录需要渲染的组件组数量，点击按钮仅修改这个数值，触发页面自动重渲染。
• 固定唯一key：用循环索引作为组件key的一部分（如method_slider_{i}），避免随机key导致的组件混乱和状态丢失。
• 按钮位置控制：仅在最后一组组件显示加号按钮，避免出现多个按钮重复触发的问题。

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