React Native/Expo中setState无法更新状态的问题求助

核心问题：闭包导致的状态捕获陷阱 #

你遇到的useState不更新的表象，本质是闭包陷阱：

• handleAudioPress函数在组件初始渲染时被创建，它捕获了当时的soundStatus初始值（null）。即使后续调用SetSoundStatus更新状态，这个函数内部访问的soundStatus始终是初始的null，不会同步最新值。
• 另外，useState的更新是异步批量执行的，在同一个函数调用里，调用SetSoundStatus后无法立即拿到新的状态值。

解决方案：用useRef保存最新状态/实例 #

因为useRef的.current属性是可变的，能随时获取到最新值，不会受闭包影响，非常适合保存音频实例和状态这类需要实时访问的值。

步骤1：替换部分useState为useRef #

修改状态定义部分，结合useRef和useState——useRef存最新值，useState触发UI重渲染：

import React, { useState, useRef, useEffect } from "react";
import { Audio } from "expo-av";

// 用ref保存实时的音频实例和状态
const soundObjRef = useRef(null);
const soundStatusRef = useRef(null);
// 保留useState用于触发组件重渲染（如果需要根据状态更新UI）
const [soundStatus, setSoundStatus] = useState(null);

步骤2：修改handleAudioPress函数逻辑 #

更新函数内部的状态访问和赋值逻辑，改用ref获取最新值：

const handleAudioPress = async (audio) => {
    try {
        const currentStatus = soundStatusRef.current;
        console.log(currentStatus);

        if (!currentStatus) {
            const sound = new Audio.Sound();
            const sanitizedUri = audio.uri
                .replace(/#/g, "%23")
                .replace(/\?/g, "%3F")
                .replace(/ /g, "%20");
            const stt = await sound.loadAsync(
                { uri: sanitizedUri },
                { shouldPlay: true }
            );

            // 更新ref的实时值
            soundObjRef.current = sound;
            soundStatusRef.current = stt;
            // 触发UI重渲染（如果需要）
            setSoundStatus(stt);

            console.log('音频已加载并播放');
        } else if (currentStatus.isLoaded && currentStatus.isPlaying) {
            // 示例：添加暂停逻辑
            await soundObjRef.current.pauseAsync();
            const pausedStatus = await soundObjRef.current.getStatusAsync();
            soundStatusRef.current = pausedStatus;
            setSoundStatus(pausedStatus);
            console.log('音频已暂停');
        }
    } catch (e) {
        console.error('音频操作失败:', e);
    }
};

步骤3：添加组件卸载时的资源清理 #

避免音频实例内存泄漏，在组件卸载时释放资源：

useEffect(() => {
    return () => {
        if (soundObjRef.current) {
            soundObjRef.current.unloadAsync();
        }
    };
}, []);

额外注意事项 #

• React和React Native的useState行为完全一致，你的问题是通用的React闭包问题，和RN无关。
• 如果你的UI需要根据soundStatus更新（比如切换播放/暂停图标），必须保留useState的soundStatus来触发重渲染；如果只是逻辑层面访问状态，只用useRef即可。
• 确保列表项设置唯一key，避免重复渲染导致的异常：

const renderItem = ({ item }) => {
    return (
        <AudioListItem
            key={item.id} // 替换为你的数据中唯一标识字段
            title={item.filename}
            duration={item.duration}
            onAudioPress={() => handleAudioPress(item)}
            onOptionPress={() => {
                currentItem.current = item;
                setModalVisibility((v) => !v);
            }}
        />
    );
};

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