React Native中useState变量communityUser弹窗无法取值问题

核心原因：闭包陷阱 #

你遇到的是典型的React闭包陷阱问题：

• 组件首次渲染时，第一个useEffect（依赖为空数组）执行，调用navigation.setOptions设置了头部的IconButton，此时handleLeaveCommuntiyAlert函数捕获的是当时communityUser的初始值（空字符串）。
• 后续communityUser通过setCommunityUser更新后，这个已经设置好的头部按钮不会重新生成——因为初始化的useEffect只执行一次，所以点击按钮时触发的始终是第一次创建的handleLeaveCommuntiyAlert，它拿到的还是旧的communityUser值。
• 页面渲染的文本能正常显示，是因为组件每次state更新都会重新执行render，文本部分会直接读取最新的communityUser状态。

解决方案 #

方案1：让头部按钮随communityUser更新重新设置 #

修改设置导航选项的useEffect，把communityUser加入依赖数组，这样每次communityUser变化时，都会重新生成头部按钮，确保函数捕获最新状态：

useEffect(() => {
    getMyId();
    getCoverPicture();
    navigation.setOptions({
        headerTitle: '',
        headerBackTitle: 'Back',
        headerRight: ({ tintColor }) => (
            <IconButton
                icon="close"
                size={24}
                color={tintColor}
                onPress={handleLeaveCommuntiyAlert}
            />
        ),
    });
}, [navigation, communityUser]); // 添加communityUser到依赖列表

方案2：用useRef保存最新值 #

使用useRef存储communityUser的最新值，ref的current属性不受闭包限制，始终能拿到最新状态：

// 新增ref定义
const communityUserRef = useRef('');

// 同步state到ref
useEffect(() => {
  communityUserRef.current = communityUser;
}, [communityUser]);

// 修改弹窗函数，使用ref.current
async function handleLeaveCommuntiyAlert() {
    Alert.alert('Are you sure you want to leave this community? btw this is your communityId: '+communityUserRef.current, '', [
        { text: 'Yes', onPress: handleLeaveCommuntiy },
        { text: 'No', onPress: () => console.log('Cancel') }
    ]);
}

// 同样修改离开社区的函数
async function handleLeaveCommuntiy() {
    console.log('Leaving community with this id:', communityUserRef.current);
    if (!communityUserRef.current) {
        console.log('Community user is not set. Cannot leave community.');
        return;
    }
    const leavedCommunity = await leaveCommunity(communityUserRef.current);
    navigation.navigate('Community', { all: true });
    console.log(leavedCommunity);
}

方案3：直接在按钮onPress中使用箭头函数（配合依赖更新） #

在headerRight的按钮onPress里用箭头函数包裹，同时确保navigation.setOptions在communityUser变化时重新执行：

useEffect(() => {
    navigation.setOptions({
        headerTitle: '',
        headerBackTitle: 'Back',
        headerRight: ({ tintColor }) => (
            <IconButton
                icon="close"
                size={24}
                color={tintColor}
                onPress={() => handleLeaveCommuntiyAlert()} // 箭头函数包裹
            />
        ),
    });
}, [navigation, communityUser]);

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