React-Native如何在Alert的onPress回调内调用setState更新状态

这个问题和RN Alert的实现逻辑、重渲染机制无关，完全是代码写法错误和React状态更新的固有特性导致的，具体问题点如下：

• 代码语法错误：changeStateCallback 没有实际执行，你写的changeStateCallback;只是引用了函数本身，缺少函数调用的括号()，所以切换状态的逻辑根本没有运行。
• React状态更新是异步批量执行的：在同一个事件回调函数中，调用setState之后，React不会立刻更新当前上下文中的state变量，所以你在setState(true)之后立刻打印的state，永远是当前闭包捕获的旧值，自然两次打印都是false。
• 闭包陷阱：你直接通过ExampleAlert()函数调用的方式触发弹窗，而不是通过<ExampleAlert />组件渲染的方式调用，会导致Alert的onPress回调永远捕获调用ExampleAlert()那一刻的state值，后续组件重渲染也不会更新已经弹出的Alert绑定的回调，如果你是在组件初始化阶段就调用了ExampleAlert()，那回调里拿到的state永远是初始值false。

修复方法 #

1. 补全changeStateCallback的调用括号，状态更新优先使用函数式写法避免闭包问题：

const changeStateCallback = useCallback(() => {
  setState(prevState => !prevState);
}, []); // 用函数式更新就不需要把state加入依赖数组

2. 如果要验证状态是否更新成功，通过useEffect监听state变化打印，不要在setState调用后立刻打印：

useEffect(() => {
  console.log('state更新为：', state);
}, [state]);

3. 调整Alert的触发逻辑：不要把Alert.alert封装成返回null的组件，直接封装成普通函数调用即可，避免不必要的闭包问题。

修正后完整参考代码 #

const [state, setState] = useState(false);

useEffect(() => {
  console.log('state更新后的值：', state);
}, [state]);

const changeStateCallback = useCallback(() => {
  setState(prev => !prev);
}, []);

// 直接封装成普通函数，不要做成组件
const showExampleAlert = () => {
  Alert.alert(
    'Title',
    'Message',
    [
      {
        text: 'Change State?',
        onPress: () => {
          changeStateCallback(); // 补全调用括号
        },
      },
      {
        text: 'OK',
        onPress: () => {},
      },
    ],
  );
};

// 其他位置调用弹窗直接执行showExampleAlert()即可

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