React Navigation报错：渲染组件时无法更新另一组件的问题求助

问题背景 #

使用Expo + React Native开发应用，通过StackNavigator管理多页面路由，借助DatabaseManager类的静态异步方法获取本地数据库数据，组件通过useState和useEffect加载并展示数据。

从Home页面跳转到Screen页面时触发以下警告：

Warning: Cannot update a component (%s) while rendering a different component (%s). To locate the bad setState() call inside %s, follow the stack trace as described in https://reactjs.org/link/setstate-in-render%s, StackNavigator, Screen, Screen.

推测该警告是导致有时需要点击两次才能完成页面跳转的原因，尝试过useFocusEffect、enableFreeze配置、添加加载页等方案均无效，排查发现Home组件跳转后未触发重渲染。

问题根源 #

这个警告的核心是在渲染组件的过程中，更新了另一个组件的状态，结合你的代码结构，问题大概率出在Screen组件中：
由于Screen组件结构和Home类似，可能在组件渲染阶段（比如直接在函数体执行异步操作、或useEffect依赖配置错误）触发了状态更新，此时StackNavigator正在处理页面跳转的渲染流程，两者的状态更新逻辑冲突，干扰了导航行为，最终导致两次点击才能跳转的异常。

解决方案 #

1. 修正Screen组件的状态更新时机 #

确保Screen组件的数据获取和状态更新仅在正确的时机触发，避免渲染阶段的异步操作冲突：

• 若仅需组件挂载时获取一次数据，使用带空依赖数组的useEffect（和Home组件逻辑一致）；
• 若需要每次进入页面都重新获取数据，使用useFocusEffect并配合useCallback包裹异步函数，避免不必要的重复执行：

import { useFocusEffect } from '@react-navigation/native';
import { useCallback, useState } from 'react';

export default function Screen({ route }) {
  const [exercises, setExercises] = useState([]);
  const { split } = route.params;

  useFocusEffect(
    useCallback(() => {
      const fetchExercises = async () => {
        const data = await DatabaseManager.getExercises(split);
        setExercises(data);
      };
      fetchExercises();
    }, [split])
  );

  // 页面渲染逻辑...
}

2. 优化DatabaseManager的数据库连接逻辑 #

避免重复初始化数据库连接，防止竞态条件导致的状态异常：

export default class DatabaseManager {
  static db = null;

  static async openDatabase() {
    // 已初始化则直接返回，避免重复连接
    if (this.db) return this.db;
    // 你的数据库初始化逻辑，比如SQLite.openDatabase
    this.db = await SQLite.openDatabase({ name: 'your-db-name.db' });
    return this.db;
  }

  // 其余方法保持不变...
}

3. 移除Home组件中不必要的async标记 #

handlePress函数内无异步操作，无需标记为async，避免异步调度干扰导航流程：

const handlePress = (split) => {
  navigation.navigate('Screen', { split: split });
};

4. 调整导航器配置 #

若启用了enableFreeze，可暂时关闭测试，排除配置导致的渲染冲突：

function HomeStackScreen() {
  return (
    <HomeStack.Navigator initialRouteName='Home' >
      <HomeStack.Screen name="Home" component={Home} options={{title:'Splits'} }/>
      <HomeStack.Screen name="Screen" component={Screen} />
    </HomeStack.Navigator>
  );
}

验证步骤 #

1. 按上述修改Screen组件的数据获取逻辑；
2. 移除Home组件handlePress的async标记；
3. 运行应用测试页面跳转，观察警告是否消失；
4. 验证是否还存在两次点击才能跳转的问题。

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