React Native中如何等待setState执行完成后再运行后续代码

问题根源 #

React的状态更新是异步批量执行的，调用setModalVisible后，当前作用域下的modalVisible变量不会立刻更新，你现在的写法判断的还是状态更新前的旧值，无法满足「状态更新完成后再执行逻辑」的需求。

适配不同组件写法的解决方案 #

1. 类组件场景 #

类组件的setState方法天生支持第二个回调参数，会在状态更新完成、组件重渲染结束后自动执行，直接把后续逻辑放在回调里即可：

this.setState({ modalVisible: false }, () => {
  // 这里的this.state.modalVisible已经是更新后的最新值
  if (this.state.modalVisible === false) {
    dispatch(updateUser(r.data));
  } else {
    NavigationHelper.navigate('Login');
  }
})

2. 函数组件+useState场景 #

useState返回的状态更新函数没有内置回调参数，需要通过useEffect监听modalVisible的变化，触发后续逻辑：
首先保留状态更新的调用：

setModalVisible(false);

单独声明useEffect监听状态变化：

import { useEffect } from 'react';

// 组件内部逻辑
const [modalVisible, setModalVisible] = useState(/* 你的初始值 */);

useEffect(() => {
  if (modalVisible === false) {
    dispatch(updateUser(r.data));
  } else {
    NavigationHelper.navigate('Login');
  }
// 依赖项按照eslint react-hooks规则提示补全即可
}, [modalVisible, dispatch, r.data, NavigationHelper])

如果仅需要在你主动调用setModalVisible(false)的场景触发这段逻辑，不想其他修改modalVisible的操作触发执行，可以额外加一个辅助状态做开关：

const [shouldRunAfterHide, setShouldRunAfterHide] = useState(false);

// 触发更新的位置
setShouldRunAfterHide(true);
setModalVisible(false);

// useEffect调整为
useEffect(() => {
  if (!shouldRunAfterHide) return;
  if (modalVisible === false) {
    dispatch(updateUser(r.data));
  } else {
    NavigationHelper.navigate('Login');
  }
  // 执行完重置开关，避免重复触发
  setShouldRunAfterHide(false);
}, [modalVisible, shouldRunAfterHide, dispatch, r.data, NavigationHelper])

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