道具类型失败：“object”类型的道具“defaultValue”无效
Posted
技术标签:
【中文标题】道具类型失败：“object”类型的道具“defaultValue”无效【英文标题】：Failed prop type: Invalid prop `defaultValue` of type `object` 【发布时间】：2021-07-27 00:51:29 【问题描述】：喂！我是 react native 的新手，但我正面临这个问题。
我使用 TextInput 设计了 OTP 屏幕，但出现了我不知道为什么的错误，失败的 prop type invalid prop 'defaultValue' of type 'object' 提供给 'textinput' 预期的 'string' . 我使用 state hook 和 useref hook 来创建这个屏幕。
这里是屏幕的完整代码：
//import files
const EmailOTP = ( navigation ) =>
const [otpState, setOtpState] = useState(
pin1: '',
pin2: '',
pin3: '',
pin4: '',
pin5: '',
pin6: '',
)
otpState.pin1 = useRef('');
otpState.pin2 = useRef('');
otpState.pin3 = useRef('');
otpState.pin4 = useRef('');
otpState.pin5 = useRef('');
otpState.pin6 = useRef('');
useEffect(() =>
otpState.pin1.current.focus();
, [])
return (
<View style=styles.container >
<ScrollView
contentInsetAdjustmentBehavior="automatic"
showsVerticalScrollIndicator=false
>
<View style=styles.OTPWrapper >
<TextInput
ref=otpState.pin1
onChangeText=pin1 =>
setOtpState( pin1: pin1 )
if (otpState.pin1 != "")
otpState.pin2.current.focus();
defaultValue=otpState.pin1
maxLength=1
style=styles.OTPinput
/>
<TextInput
ref=otpState.pin2
onChangeText=pin2 =>
setOtpState( pin2: pin2 )
if (otpState.pin2 != "")
otpState.pin3.current.focus();
defaultValue=otpState.pin2
maxLength=1
style=styles.OTPinput
/>
<TextInput
ref=otpState.pin3
onChangeText=pin3 =>
setOtpState( pin3: pin3 )
if (otpState.pin3 != "")
otpState.pin4.current.focus();
defaultValue=otpState.pin3
maxLength=1
style=styles.OTPinput
/>
<TextInput
ref=otpState.pin4
onChangeText=pin4 =>
setOtpState( pin4: pin4 )
if (otpState.pin4 != "")
otpState.pin5.current.focus();
defaultValue=otpState.pin4
maxLength=1
style=styles.OTPinput
/>
<TextInput
ref=otpState.pin5
onChangeText=pin5 =>
setOtpState( pin5: pin5 )
if (otpState.pin5 != "")
otpState.pin6.current.focus();
defaultValue=otpState.pin5
maxLength=1
style=styles.OTPinput
/>
<TextInput
ref=otpState.pin6
onChangeText=pin6 =>
setOtpState( pin6: pin6 )
defaultValue=otpState.pin6
maxLength=1
style=styles.OTPinput
/>
</View>
<TouchableOpacity onPress=()=>navigation.navigate('PhoneNumberVerification')>
<View style=[styles.btnWrapper, marginTop: 40, ] >
<Text style=styles.logButton >Verify Email</Text>
</View>
</TouchableOpacity>
<View style=styles.contentWrapperOtpResend >
<View style=styles.loginRedirectWrapper>
<Text style=styles.loginRedirectText >Didn't Receive the code?</Text>
<Text style=styles.loginRedirectButton> Resend</Text>
</View>
</View>
</ScrollView>
</View>
);
export default EmailOTP
【问题讨论】：
为所有文本字段尝试 defaultValue=otpState.pin3.current.value @ShreeCharan 仍然有错误继续执行此操作 1 次错误引发 ** TypeError: undefined is not an object (evalating 'pin1.current.value')** 【参考方案1】：在我看来，您实际上只是链接了引脚但尚未设置它们。试试这个：
otpState.pin1 = useRef(null);
otpState.pin2 = useRef(null);
otpState.pin3 = useRef(null);
otpState.pin4 = useRef(null);
otpState.pin5 = useRef(null);
otpState.pin6 = useRef(null);
otpState.pin1.current = '';
otpState.pin2.current = '';
otpState.pin3.current = '';
otpState.pin4.current = '';
otpState.pin5.current = '';
otpState.pin6.current = '';
并将每个 TextInput 的 defaultValue 设置为它们各自的引脚，如下所示：'otpState.pin1.current'
TextInput 应该是这样的：
<TextInput
ref=otpState.pin1
onChangeText=pin1 =>
setOtpState(pin1: pin1);
if (otpState.pin1 != '')
otpState.pin2.current.focus();
defaultValue=otpState.pin1.current
maxLength=1
style=styles.OTPinput
/>
【讨论】：
谢谢它已经解决了。你能再指导我一件事谁来安慰价值观。我尝试console.log(otpState) 但在控制台上看起来像这样 "pin1": "current": "", "pin2": "current": "", "pin3": "current" : "", "pin4": "current": "", "pin5": "current": "", "pin6": "current": "" 我是怎么做到的可以安慰他们吗？
没有得到你的伴侣..你到底想在你的控制台中看到什么？
仍然没有@Gavin以上是关于道具类型失败：“object”类型的道具“defaultValue”无效的主要内容，如果未能解决你的问题，请参考以下文章
道具类型失败：提供给“TextInput”React Native 的“对象”类型的无效道具“值”
在 Gatsby 中使用 Graphql 和 Contentful 时图像不显示，道具类型失败：类型为“数字”的道具“图像”无效，预期为“对象”？
Vue.js - 无效的道具：道具“src”的类型检查失败。预期的字符串，对象，得到了 Promise