Javascript 失败的属性类型：类型为“对象”的属性“defaultValue”无效`

嘿！我是新来的，但我面临着这个问题

我使用TextInput设计OTP屏幕，但我不知道为什么会出现这样的错误，未能将类型为“object”的无效属性“defaultValue”提供给“TextInput”预期的“string”。 我使用state钩子和useref钩子创建了这个屏幕

以下是屏幕的完整代码：

//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

//导入文件
常量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（“”）；
useffect（（）=>{
otpState.pin1.current.focus（）；
}, [])
返回(
{
setOtpState（{pin1:pin1}）
如果（otpState.pin1！=“”）{
otpState.pin2.current.focus（）；
}
}
}
defaultValue={otpState.pin1}
maxLength={1}
style={style.OTPinput}
/>
{
setOtpState（{pin2:pin2}）
如果（otpState.pin2！=“”）{
otpState.pin3.current.focus（）；
}
}
}
defaultValue={otpState.pin2}
maxLength={1}
style={style.OTPinput}
/>
{
setOtpState（{pin3:pin3}）
如果（otpState.pin3！=“”）{
otpState.pin4.current.focus（）；
}
}
}
defaultValue={otpState.pin3}
maxLength={1}
style={style.OTPinput}
/>
{
setOtpState（{pin4:pin4}）
如果（otpState.pin4！=“”）{
otpState.pin5.current.focus（）；
}
}
}
defaultValue={otpState.pin4}
maxLength={1}
style={style.OTPinput}
/>
{
setOtpState（{pin5:pin5}）
如果（otpState.pin5！=“”）{
otpState.pin6.current.focus（）；
}
}
}
defaultValue={otpState.pin5}
maxLength={1}
style={style.OTPinput}
/>
{
setOtpState（{pin6:pin6}）
}
}
defaultValue={otpState.pin6}
maxLength={1}
style={style.OTPinput}
/>
navigation.navigate（'PhoneNumberVerification'）}>
验证电子邮件
没有收到密码？
重发
);
}
导出默认电子邮件OTP

在我看来，您实际上只是链接了管脚，但没有设置它们。请尝试以下方法：

  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 = '';

并将每个文本输入的默认值设置为各自的管脚，如下所示：

'otpState.pin1.current'

这就是文本输入的样子：

    <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}
      />

{
setOtpState（{pin1:pin1}）；
如果（otpState.pin1！=''）{
otpState.pin2.current.focus（）；
}
}}
defaultValue={otpState.pin1.current}
maxLength={1}
style={style.OTPinput}
/>

为所有文本尝试defaultValue={otpState.pin3.current.value}fields@ShreeCharan仍然错误继续执行此操作1更多错误引发**TypeError:undefined不是对象（正在计算'pin1.current.value'）**感谢已解决此问题。你能再给我一件事吗？谁来安慰价值观。我尝试

console.log（otpState）

但在控制台上它看起来像这样{“pin1”：{“current”：“}”，pin2:{“current”：“}”，pin3:{“current”：“}”，pin4:{“current”：“}”，pin5:{“current”：“}，pin6”：{“current”：“}}我怎么能控制它们呢？你还没明白吗。。你到底想在控制台上看到什么？仍然没有@Gavin