React Native中布尔值状态setState不生效问题求助

问题根源分析 #

1. 状态更新异步特性：setIsCourse(true)是异步操作，调用后立刻打印isCourse会拿到当前闭包中的旧值，并非更新后的新值。
2. useEffect依赖错误：将isCourse加入依赖数组，会导致每次状态变化时重新执行effect，重复初始化动态链接监听，引发逻辑混乱。
3. 动态链接回调定义错误：handleDynamicLinks被定义为Promise（来自getInitialLink().then()），但onLink需要的是处理链接的回调函数，而非Promise，导致后续链接触发时无法正确处理。

修复方案与代码 #

import { useState, useEffect } from 'react';
import { Appearance } from 'react-native';
import dynamicLinks from '@react-native-firebase/dynamic-links'; // 根据实际使用的动态链接库调整

const [appTheme, setAppTheme] = useState(Appearance.getColorScheme());
const [isCourse, setIsCourse] = useState(false);

// 统一处理链接逻辑
const handleLink = (link) => {
  console.log('here is your link', link.url);
  if (link && link.url === 'https://englishmuni.page.link/course') {
    setIsCourse(true);
  }
};

useEffect(() => {
  // 处理APP启动时的初始链接
  dynamicLinks()
    .getInitialLink()
    .then(link => {
      if (link) handleLink(link);
    });

  // 监听APP运行时的动态链接
  const linkUnsubscribe = dynamicLinks().onLink(({ url }) => {
    handleLink({ url });
  });

  // 监听系统主题变化
  const themeUnsubscribe = Appearance.addChangeListener(scheme => {
    setAppTheme(scheme.colorScheme);
  });

  // 组件卸载时清理所有订阅
  return () => {
    linkUnsubscribe();
    themeUnsubscribe();
  };
}, []); // 空依赖数组确保仅初始化一次

// 监听isCourse状态变化，查看更新后的值
useEffect(() => {
  console.log('--*****--', isCourse);
}, [isCourse]);

关键说明 #

• 用独立的handleLink函数统一处理初始链接和后续链接，避免代码重复。
• useEffect使用空依赖数组，确保只在组件挂载时初始化一次监听，避免重复订阅和逻辑循环。
• 通过单独的useEffect监听isCourse状态变化，才能正确获取更新后的值（状态更新后会触发该effect）。
• 清理所有订阅（包括主题变化监听），避免内存泄漏。

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