React Native点击StatusBoxComponent交替添加两种状态组件问题求助

你的代码存在两个核心错误：

• 直接把React组件实例存储在useState中，触发了闭包陷阱：你定义的breakInClick、breakOutClick函数在创建时会捕获当前渲染周期的inState快照，当你把绑定了旧回调的组件存入state后，后续点击触发回调时拿到的永远是创建组件时的旧inState值，不是最新的状态，所以会出现基于旧值更新、看起来像是替换现有组件的问题。
• 状态更新逻辑错误嵌套：你每次调用setInState时，不仅新增了组件，还在新的片段里插入了{inState}，相当于把旧的所有组件又嵌套了一遍，导致组件层级不断重复，点击初始组件时多个旧闭包的回调同时触发，就会一次性新增多个组件。

不要在state中存组件实例，只存纯状态数据，渲染时遍历数据生成组件即可，示例代码如下：

const AttendanceScreen = (props: any) => {
    // 仅存储所有组件的状态标识，初始为1个Break-In
    const [statusList, setStatusList] = useState<Array<'Break-In' | 'Break-Out'>>(['Break-In']);

    const handleBoxClick = () => {
        // 取最后一个状态判断下一个要新增的状态
        const lastStatus = statusList.at(-1);
        const nextStatus = lastStatus === 'Break-In' ? 'Break-Out' : 'Break-In';
        setStatusList([...statusList, nextStatus]);
    };

    return (
        <>
            {statusList.map((status, index) => (
                <StatusBoxComponent
                    key={index}
                    status={status}
                    breakIn={handleBoxClick}
                />
            ))}
        </>
    );
};

这个方案只有一个统一的点击回调，每次都基于最新的statusList生成下一个状态，完全规避了闭包和嵌套渲染的问题，就能实现你要的交替新增的效果。

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