React Native点击TouchableOpacity出现object are not valid as react child错误求助

错误原因 #

• 核心错误点为优先级输入框的事件绑定错误：你为Enter Priority对应的TextInput组件使用了onChange事件而非onChangeText事件。onChange的回调参数是React合成事件对象，并非输入的文本内容，你直接将该事件对象存入了priority状态中。
• 当点击「Create Task」按钮后，showCreatedTask变为true，代码尝试在<Text>组件中渲染priority状态值，而React不允许将对象直接作为子元素渲染，因此抛出"object are not valid as react child"错误。你看到的合成事件复用警告，也是因为存储在状态中的事件对象被React回收后再次访问导致的。

解决方法 #

将优先级输入框的onChange替换为onChangeText即可，若需要保证priority为数字类型，可额外添加类型转换逻辑，避免后续业务逻辑出错：

// 修改前的代码
<TextInput
  placeholder="Enter Priority"
  style={tailwind("m-2 border p-1 bg-white")}
  onChange={(text) => setPriority(text)}
/>

// 修改后的代码
<TextInput
  placeholder="Enter Priority"
  style={tailwind("m-2 border p-1 bg-white")}
  onChangeText={(text) => setPriority(Number(text) || 0)}
/>

同类问题排查思路 #

遇到"object are not valid as react child"错误时，可优先排查所有在JSX中直接渲染的变量：

• 检查状态变量的赋值逻辑，确认是否有意外将对象、数组、函数等无法直接渲染的类型赋值给了要渲染的变量
• 优先检查新增的渲染逻辑对应的状态，可通过打印对应变量的类型和值快速定位问题

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