React Native中CharInfo跳转CharEdit触发组件更新警告问题求解

你遇到的警告是CharInfo页面中TouchableOpacity的onPress属性绑定逻辑错误导致的：

• onPress属性要求接收一个函数作为回调，在用户点击按钮时才执行内部逻辑，但你直接写了onPress={navigation.navigate('CharEdit', {id: id})}，相当于在CharInfo组件渲染的过程中就直接执行了navigation.navigate方法，触发了导航状态更新。
• 此时CharInfo组件还在渲染流程中，导航更新属于跨组件的状态修改，违反了React的渲染规则，所以抛出了Cannot update a component from inside the function body of a different component警告，同时也会出现进入CharInfo页面就自动跳转到CharEdit的问题。

只需要修改CharInfo.js中编辑按钮的onPress属性，把跳转逻辑包裹在箭头函数里即可：

// 修改前
<TouchableOpacity style={styles.editButton} onPress={navigation.navigate('CharEdit', {id: id})} >

// 修改后
<TouchableOpacity style={styles.editButton} onPress={() => navigation.navigate('CharEdit', {id: id})} >

修改后只有用户点击按钮时才会执行跳转逻辑，不会在渲染阶段触发跨组件更新，警告会自动消失。

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