Promise中更新React状态后无法访问，Twilio通话无法终止

问题根源 #

1. 闭包陷阱：handleLeaveRoom在组件初始渲染时创建，捕获了当时的call状态（初始为undefined）。后续setCall更新状态后，组件重新渲染，但未重新创建的handleLeaveRoom仍引用旧的call值，导致打印undefined。
2. 全局变量生命周期错误：你用let checkCall = false在组件内部声明，每次组件重新渲染时这个变量都会被重置为false，可能重复触发通话创建逻辑，同时干扰状态判断。
3. useEffect依赖重复触发：useEffect依赖数组包含call，当call更新后会再次执行，若没有正确的状态控制，会引发不必要的逻辑执行。

解决方案一：用useRef保存通话实例 #

React的useRef可以保存可变引用，不受组件渲染和闭包影响，直接在回调中获取最新实例：

// 替换useState，用useRef保存通话实例
const callRef = useRef(null);
const [callConnected, setCallConnected] = useState(false);
// 用useRef保存checkCall状态，避免组件渲染时重置
const checkCallRef = useRef(false);

useEffect(() => {
    function selectDriver() {
        driverInState.current = sortUsersAlphabetically([user.username, matchedUserState.current])[0]
    }
    console.log('!!!*** how many times is twilio being called ***!!!')
    WebSocketInstance.connect()
    selectDriver()
    const params = {
        roomName: roomName, participantLabel: user.username
    };
    if(!checkCallRef.current){
        if (!callRef.current) {
            const callPromise = device.connect({ params });
            callPromise.then((twilioCall) => {
                console.log(' ***what is call', twilioCall)
                callRef.current = twilioCall;
                setCallConnected(true)
            });
        }
        if (!participants.current.includes(user.username)) {
                participants.current.push(user.username);
        }
        checkCallRef.current = true;
    }
}, [roomName, user, device, participants, driverInState,matchedUserState,sortUsersAlphabetically]); // 移除call依赖

const handleLeaveRoom = () => {
    console.log("INSIDE FUNCTION TO TERMINATE CALL", JSON.stringify(callRef.current));
    if(callRef.current){
        callRef.current.disconnect();
        callRef.current = null; // 断开后重置引用
        setCallConnected(false);
    }
};

解决方案二：用useCallback配合状态依赖 #

如果坚持用useState保存通话实例，用useCallback包裹回调函数并加入call依赖，确保每次call更新时函数重新创建，捕获最新状态：

const [call, setCall] = useState();
const [callConnected, setCallConnected] = useState(false);
const checkCallRef = useRef(false);

useEffect(() => {
    function selectDriver() {
        driverInState.current = sortUsersAlphabetically([user.username, matchedUserState.current])[0]
    }
    console.log('!!!*** how many times is twilio being called ***!!!')
    WebSocketInstance.connect()
    selectDriver()
    const params = {
        roomName: roomName, participantLabel: user.username
    };
    if(!checkCallRef.current){
        if (!call) {
            const callPromise = device.connect({ params });
            callPromise.then((twilioCall) => {
                console.log(' ***what is call', twilioCall)
                setCall(twilioCall);
                setCallConnected(true)
            });
        }
        if (!participants.current.includes(user.username)) {
                participants.current.push(user.username);
        }
        checkCallRef.current = true;
    }
}, [roomName, user, call, device, participants, driverInState,matchedUserState,sortUsersAlphabetically]);

// 用useCallback包裹，依赖call确保捕获最新状态
const handleLeaveRoom = useCallback(() => {
    console.log("INSIDE FUNCTION TO TERMINATE CALL", JSON.stringify(call));
    if(call){
        call.disconnect();
        setCall(null);
        setCallConnected(false);
    }
}, [call]);

关键注意事项 #

• 不要用组件内部的let变量保存跨渲染的状态，改用useRef，否则每次组件渲染都会重置变量值，导致状态丢失。
• 回调函数需要访问最新React状态时，要么用useRef保存可变引用，要么用useCallback配合依赖数组，确保函数能获取最新状态。
• 断开通话后记得重置对应的状态或ref，避免下次创建通话时出现异常。

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