React Native中useState与navigation冲突问题求助

核心问题分析 #

你遇到的Cannot update a component while rendering a different component警告，以及按钮看似禁用的问题，根源在两处：

• 按钮 onPress 写法错误：直接执行navigation.goBack()会在组件渲染阶段就触发页面返回，相当于在渲染当前组件时修改了导航栈（属于另一个组件的状态），触发警告，同时按钮还没被点击就执行了返回逻辑，看起来像“禁用”。
• 无效的 useEffect 调用：你定义的useEffect里调用了onChangeText，但这个函数根本不存在，属于冗余错误代码。

修复后的完整代码 #

import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity } from 'react-native';

export default function YourComponent({ navigation }) {
  const [text, changeText] = useState("");

  return(
    <View>
      <Text>DER NEUE SCREEN</Text>
      <TextInput placeholder="Name your Year" onChangeText={changeText} />
      {/* 传递函数引用，而非直接执行函数 */}
      <TouchableOpacity onPress={() => navigation.goBack()}>
        <Text>BUTTON</Text>
      </TouchableOpacity>
      <Text>{text}</Text>
    </View>
  );
}

关键修复点 #

• 修正 onPress 逻辑：把onPress={navigation.goBack()}改成onPress={() => navigation.goBack()}，确保只有按钮被点击时才执行返回操作，避免渲染阶段触发跨组件状态变更。
• 移除无效 useEffect：之前的useEffect调用了不存在的函数，属于冗余代码，直接删除即可。
• 保留正确的输入绑定：你用useState绑定TextInput的onChangeText逻辑是正确的，输入内容会正常保存到text状态中，无需修改。

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