React Native点击按钮后Console.log输出dispatch_instances长内容问题排查

错误原因 #

你犯的核心错误是React Native的TextInput组件的onChange回调接收的是一个事件对象，而非直接的输入文本。你将这个事件对象直接存入enteredGoalText状态，导致点击按钮时控制台输出的是包含_dispatchInstances、_dispatchListeners的事件对象，而非预期的输入文本。

修复方案 #

方案1：使用onChangeText（推荐）

React Native专门提供了onChangeText回调，它会直接把输入框的文本内容作为参数传递给处理函数，无需手动从事件对象中提取。只需修改TextInput的回调属性：

<TextInput
  style={styles.textInput}
  placeholder="Your course goal!!" 
  onChangeText={goalInputHandler} // 替换onChange为onChangeText
/>

你的goalInputHandler函数无需修改，就能正确接收输入文本并更新状态。

方案2：从onChange事件对象中提取文本

如果一定要使用onChange，需要从事件对象的nativeEvent属性中获取文本内容，修改goalInputHandler函数：

function goalInputHandler(event) {
  setenteredGoalText(event.nativeEvent.text);
}

TextInput的onChange属性保持不变即可。

说明 #

优先选择方案1，onChangeText是React Native为简化文本输入场景设计的API，代码更简洁直观，避免了手动处理事件对象的繁琐。

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