React Native：useState的setter函数为何无法正常执行？

你的问题核心是WebSocket监听器没有随组件生命周期正确清理，导致组件重新挂载时，旧的监听器仍然存在，并且引用的是组件上一次渲染时的闭包（包括旧的setLoadingState和loadingState）。当再次触发connect事件时，执行的是旧闭包里的updateSongsState，自然无法更新当前组件的状态。

方案1：用useEffect管理WebSocket监听器的订阅与清理 #

把WebSocket的监听器订阅放到useEffect中，组件卸载时移除监听器，确保每次组件挂载时都只绑定最新的监听器：

const [loadingState, setLoadingState] = useState<string>(someValue);

const updateSongsState = async (): Promise<void> => {
    // ...
    setLoadingState(someNewValue);
};

useEffect(() => {
    // 定义连接回调函数
    const handleConnect = () => {            
        setTimeout(() => { void updateSongsState() }, 1000);
    };
    
    // 绑定监听器
    ws.on('connect', handleConnect);
    
    // 组件卸载时移除监听器，避免旧闭包残留
    return () => {
        ws.off('connect', handleConnect);
    };
}, [updateSongsState]); // 依赖updateSongsState，确保回调引用最新版本

useEffect(() => {
    console.log(loadingState);
}, [loadingState]);

方案2：用useCallback优化函数引用稳定性 #

如果updateSongsState的逻辑不需要频繁变化，可以用useCallback包裹它，减少不必要的useEffect触发：

const updateSongsState = useCallback(async (): Promise<void> => {
    // ...
    setLoadingState(someNewValue);
}, []); // 根据实际逻辑添加依赖，比如someNewValue是状态/Props时需加入

// 后续useEffect写法同方案1

方案3：使用函数式更新状态（补充优化） #

如果担心闭包问题未彻底解决，可以在setLoadingState时用函数式更新，确保基于最新状态计算新值：

const updateSongsState = async (): Promise<void> => {
    // ...
    setLoadingState(prevState => {
        // 可基于prevState计算新值，或直接返回目标值
        return someNewValue;
    });
};

内容的提问来源于stack exchange，提问作者Michał_Zagojski