React Native底部Tab导航两屏复用组件渲染异常排查

问题成因 #

• 核心原因是闭包陈旧值+Redux状态更新异步+Tab懒加载机制共同导致：
  1. 组件内useEffect依赖数组为空，首次挂载时生成的loadTodos函数捕获的是组件初始渲染时的todos值——也就是Redux初始的空数组。
  2. 你在AsyncStorage读取回调中先执行dispatch(setAllTodo(parsedTodos))，Redux的状态更新是异步触发组件重渲染的，不会同步修改当前执行上下文中闭包保存的todos变量，紧接着执行筛选逻辑时用的还是初始空数组，自然得到空结果。
  3. Bottom Tab Navigator默认采用懒加载策略：App启动时只会挂载首个默认Tab（也就是To-Do页），此时To-Do页执行筛选时拿不到最新todos数据所以渲染为空；当你切换到Done页时，Done页才首次挂载，此时Redux已经存入了全量todos数据，筛选能拿到有效值所以渲染正常。
  4. 触发热重载后页面恢复正常，是因为热重载会重新执行组件渲染逻辑，此时闭包捕获的todos已经是Redux中存储的全量数据，筛选逻辑自然能得到正确结果。
• 额外注意：原Tab配置中Done页绑定的是独立的Done组件，如果要完全复用Todos组件，需要把两个Tab的component属性都指向Todos。

解决方案 #

不要额外维护本地data状态做数据中转，直接基于Redux全局状态和当前路由参数，动态计算当前Tab需要展示的列表数据，从根源上避免闭包陈旧值、状态不同步的问题。

修正后的核心代码 #

1. Tab导航配置调整，两个Tab统一指向复用的Todos组件：

<Tab.Navigator
  screenOptions={({route}) => ({
    headerShown: false,
    tabBarIcon: ({focused, color, size}) => {
      let iconName = '';
      size = focused ? 25 : 20;
      if (route.name === 'To-Do') {
        iconName = 'clipboard-list';
      } else if (route.name === 'Done') {
        iconName = 'clipboard-check';
      }
      return <FontAwesome5Icon name={iconName} size={size} color={color} />;
    },
    tabBarActiveTintColor: '#0080ff',
    tabBarInactiveTintColor: '#777777',
    tabBarLabelStyle: {fontSize: 15, fontWeight: 'bold'},
  })}>
  <Tab.Screen name="To-Do" component={Todos} />
  <Tab.Screen name="Done" component={Todos} />
</Tab.Navigator>

2. Todos组件逻辑调整，移除本地data状态，用useMemo计算展示数据：

const Todos = ({navigation}: TodosPageProps) => {
  const dispatch = useAppDispatch();
  const {todos}: {todos: TodoInterface[]} = useAppSelector(
    state => state.todoReducer,
  );
  const route = useRoute<RouteProp<RootTabParamList, 'To-Do' | 'Done'>>();

  // 仅在组件挂载时拉取全量待办数据，同步到Redux
  useEffect(() => {
    const loadTodos = () => {
      AsyncStorage.getItem('todos').then(fetchedTodos => {
        const parsedTodos: TodoInterface[] = JSON.parse(fetchedTodos || '[]');
        dispatch(setAllTodo(parsedTodos));
      });
    };
    loadTodos();
  }, [dispatch]);

  // 依赖todos和路由名自动计算当前页展示列表，依赖变化时自动重算
  const displayData = useMemo(() => {
    return route.name === 'To-Do' 
      ? todos.filter(todo => !todo.done)
      : todos.filter(todo => todo.done);
  }, [todos, route.name]);

  // ...其余业务逻辑（新增、修改、删除待办等）保持不变

  return (
    <HideKeyboard>
      <View style={styles.body}>
        <FlatList
          data={displayData}
          // ...其余FlatList配置保持不变
        />
      </View>
    </HideKeyboard>
  );
};

方案优势 #

• 单一数据源：所有待办数据统一存在Redux中，不需要在组件内额外维护本地状态，后续新增、修改待办状态时不需要手动同步本地data，避免状态不一致bug。
• 响应式更新：只要Redux中的todos或者当前路由变化，展示数据会自动重新计算，不需要手动触发更新。
• 无闭包问题：不依赖useEffect空数组挂载时的闭包值，完全由渲染阶段的最新props/state计算得到展示数据。

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