道具类型失败：“object”类型的道具“defaultValue”无效

Question

喂！我是 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

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