React Native使用TouchableOpacity触发跨组件更新警告该如何修复

问题原因 #

你遇到的警告核心是组件渲染过程中直接触发了其他组件的状态更新，触发的直接原因是你代码里的箭头函数存在语法错误：
你写的(e) = props.locationSetState(1)少了箭头函数的>符号，正确写法应为(e) => props.locationSetState(1)。语法错误导致代码在组件渲染阶段就直接执行了props.locationSetState更新父组件状态，而非点击TouchableOpacity时才触发，所以会抛出该警告。

修复方案 #

把两处TouchableOpacity的onPress回调的箭头函数语法修正即可，修复后的代码如下：

<View style={styles.SaD}>
    <TouchableOpacity onPress={(e) => props.locationSetState(1)}>
        <Text style={styles.text1}>Choose your starting point</Text>
    </TouchableOpacity>

    <TouchableOpacity onPress={(e) => props.locationSetState(2)}>
        <Text style={styles.text1}>Choose destination</Text>
    </TouchableOpacity>
</View>

如果修正语法后仍然出现该警告，可额外排查以下两点：

• 确认父组件传递下来的locationSetState是稳定的函数，可在父组件用useCallback包裹该函数避免每次渲染都重新生成，减少不必要的重渲染。
• 检查是否有其他在组件渲染体中直接执行状态更新的逻辑，所有状态更新操作都需要放到事件回调、useEffect这类副作用执行时机中。

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