React Native中useState变量passShow提示只读的问题求助

修正后的完整代码 #

import { View, Text, Image, TextInput, TouchableOpacity, Pressable } from 'react-native'
import React, { useState } from 'react'
import logo from '../assets/client.png'
import { SafeAreaView } from 'react-native-safe-area-context'
import { Link } from 'expo-router'

// 组件名改为大写（React要求组件首字母大写）
const App = () => {
    const [passShow, setShow] = useState(true);
  return (
    <SafeAreaView className='flex-1'>
        <View className="flex-1 items-center justify-between bg-white">
            <View className='mt-36'>
                <Image source={logo} style={{width: 150, height: 96}}/>
                <Text className="text-xl py-5 mt-2 font-bold text-left w-11/12">Sign In to your Account</Text>
            </View>

            <View className='w-full items-center'>
                <View className="w-11/12 my-2">
                    <Text>Customer ID</Text>
                    <TextInput cursorColor={'#cc0000'} className="w-full border-gray-100 border-2 border-solid p-1 mt-2 rounded-lg" />
                </View>
                <View className="w-11/12 my-2">
                    <Text>Password</Text>
                    {/* secureTextEntry逻辑正确：passShow=true时隐藏密码，false时显示 */}
                    <TextInput cursorColor={'#cc0000'} secureTextEntry={passShow} className="w-full border-gray-100 border-2 border-solid p-1 mt-2 rounded-lg" />
                    <View className='flex-row justify-between '>
                        <Pressable onPress={() => setShow(!passShow)}>
                            {/* 移除多余的箭头函数，直接使用三元表达式 */}
                            <Text>{passShow ? 'Show Password' : 'Hide Password'}</Text>
                        </Pressable>
                        <Pressable><Text className="text-themeRed my-2">Reset Password</Text></Pressable>
                    </View>
                </View>

                <TouchableOpacity className='bg-themeRed w-11/12 py-3 px-2 items-center rounded-lg mt-3'>
                    <Text className='text-white'>Sign In</Text>
                </TouchableOpacity>
                
                <Link href='/signup' className='flex-row w-11/12 py-3'>
                    <Text>Don't have an Account? </Text>
                    <Text className='text-themeRed ml-1.5'>Sign Up</Text>
                </Link>
            </View>

            <View className='mb-5 items-center'>
                <Text className='text-gray-400'>24/7 support 076 979 0642 | helpdesk@ctecg.co.za</Text>
            </View>
        </View>
    </SafeAreaView>
  )
}

export default App

错误原因及解决说明 #

• 文本切换的错误：你之前用{() => passShow ? <Text>Show Password</Text> : <Text>Hide Password</Text>}是错误的，JSX中直接嵌入表达式即可，不需要包裹成箭头函数。这样写会导致渲染的是一个函数而非文本内容，同时可能引发状态读取异常，改成直接写三元表达式{passShow ? 'Show Password' : 'Hide Password'}即可。
• 组件命名规范：React要求组件名称必须首字母大写，你之前的组件名是app，改成App可以避免潜在的组件识别问题。
• 状态修改的正确性：确保始终通过setShow修改passShow状态，不要直接赋值（比如passShow = !passShow），这会触发只读错误，因为React的状态变量是不可直接修改的，必须使用对应的状态更新函数。

内容的提问来源于stack exchange，提问作者Dev.Dannel