React Native报错指向useState声明行，提示文本需在<Text>组件内渲染，求原因及解决

嘿，这个报错其实有点“误导人”——它指向useState那行，但问题根本不在状态声明本身，而是你的JSX代码里藏着没被<Text>组件包裹的文本内容，或者有语法错误导致React把某些内容当成了裸文本。

我帮你排查了下你贴的代码，发现最后一段代码明显截断了：

<TouchableOpacity style={[ globalStyles.button, globalStyles.formElement, { padding: 12 } ]} onPress={handleOtpSignIn} >
  <Text style={global

这里<Text style={global}明显没写完，应该是globalStyles.buttonText吧？这种未闭合的JSX标签会导致React解析混乱，把后续的代码片段当成了需要渲染的文本，自然就触发了“文本必须在组件内”的错误。

除此之外，还有几个常见的坑也会导致这种类似报错，给你列出来：

• 不小心在JSX里写了裸字符串，比如直接写{authError?.message}而没把它放在<Text>里（看你的代码里设置了authError但没渲染它，要是之后加的话一定要注意）
• JSX里的注释格式不对，比如用了// 注释而不是{/* 注释 */}（不过你这里的注释是规范的）
• 条件渲染里的逻辑返回了字符串，比如{showForgotPassword && "Some text"}，这种情况必须把字符串包在<Text>里

解决步骤：

1. 先把截断的代码补全，把那个未闭合的<Text>标签写完，比如改成：

<TouchableOpacity style={[ globalStyles.button, globalStyles.formElement, { padding: 12 } ]} onPress={handleOtpSignIn} >
  <Text style={globalStyles.buttonText}>Sign In with OTP</Text>
</TouchableOpacity>

2. 检查整个JSX结构，确保所有需要显示的文本（包括错误提示、条件渲染的文本）都被<Text>组件包裹
3. 确认所有JSX标签都正确闭合，没有语法错误

这种报错的核心原因就是React Native不像Web React，它不允许在组件树里直接渲染裸文本，所有可见的文本必须放在<Text>里，而报错指向的行往往只是React能捕捉到错误的起始位置，不是真正的问题点，得往JSX代码里仔细找~

内容来源于stack exchange