React Native中Unstated与React Navigation问题：状态变更后导航失效

这个问题我之前在组合使用Unstated和React Navigation时也碰到过，核心原因是：当你调用store.flipState()时，Unstated会触发组件的重渲染（因为组件通过Subscribe或钩子监听了store状态），而React的状态更新和渲染是批量处理的，后续的navigation.navigate()会被组件重渲染的流程打断，最终导致导航失效，只执行了状态变更和console.log。

下面给你两种靠谱的解决方法：

方法一：将导航放到状态更新的回调中 #

修改Unstated Store，让状态更新方法支持传入回调函数，确保导航在状态变更完全完成后执行：

1. 更新Store的flipState方法 #

// 你的Store文件，比如MyStore.js
import { Container } from 'unstated';

class MyStore extends Container {
  state = {
    // 假设你的状态是类似这样的开关状态
    isFlipped: false
  };

  // 修改flipState，支持传入回调
  flipState = (callback) => {
    this.setState(
      prevState => ({ isFlipped: !prevState.isFlipped }),
      callback // 状态更新完成后执行回调
    );
  };
}

export default new MyStore();

2. 在onPress中使用回调执行导航 #

onPress = (store) => {
  store.flipState(() => {
    // 状态更新完成后再执行导航
    this.props.navigation.navigate('anotherScreen');
  });
  console.log('hi');
};

方法二：使用React useEffect监听状态变化 #

如果不想修改Store的方法，可以在组件中用useEffect监听store状态的变化，当状态翻转后自动执行导航：

代码示例（以Unstated Next的useStore为例，传统Subscribe也适配） #

import React, { useEffect } from 'react';
import { Button } from 'react-native';
import { useStore } from 'unstated-next';
import MyStore from './MyStore';

function YourScreen({ navigation }) {
  const store = useStore(MyStore);
  const { isFlipped } = store.state;

  useEffect(() => {
    // 当状态翻转时执行导航
    if (isFlipped) {
      navigation.navigate('anotherScreen');
      // 可选：导航后重置状态，避免返回页面时重复触发导航
      store.flipState();
    }
  }, [isFlipped, navigation, store]);

  return (
    <Button
      onPress={() => {
        store.flipState();
        console.log('hi');
      }}
      title="Navigate & Update State"
    />
  );
}

注意事项 #

用这种方法时，记得在导航后重置状态，否则当用户从anotherScreen返回时，状态还是翻转后的，useEffect会再次触发导航，造成循环跳转的问题。

为什么原来的写法会失效？ #

当你在onPress中先调用store.flipState()，这个操作会立即触发组件的重渲染请求，React会把这个渲染任务加入队列。而后续的navigation.navigate()会尝试修改导航栈，但此时组件正在准备重渲染，这个导航操作可能被React的批量更新机制中断，或者因为组件上下文变化而失效，最终导致只有状态变更生效，导航没执行。

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