Я работаю с функцией автозаполнения OTP. Я использую react-native-otp-textinput, который работает. отлично. Я использую useRef() для текстового поля OTP, поэтому, когда я получу SMS, я буду использовать это useRef()
и заполнять его значением.
Постановка проблемы:
- Когда я запускаю приложение в первый раз, мой
useRef()
ведет себя нормально, и я могу автоматически заполнить элементuserRef().current.setValue()
. - Когда я запускаю приложение во второй или третий раз, я всегда получаю эту ошибку
TypeError: Невозможно прочитать свойство setValue null, js engine: hermes
То, что я сделал, было захватить, что было причиной этого. Поэтому я утешил это в своей функции. Я обнаружил в первый раз, что console.log(useRef().current)
печатает данные, но когда дело доходит до второго или третьего раза, он возвращает null. Я в замешательстве, почему это происходит?
Вот мой код:
const otpInputRef = useRef(null);
const startReadSMSListerner = async () => {
// Checking permission, else getting one
const hasPermission = await ReadSms.requestReadSMSPermission();
// If given permission, start listening, else, leave it
if(hasPermission){
ReadSms.startReadSMS((status, sms, error) => {
if(status === 'success'){
console.log(otpInputRef.current); // <-- Comes fine for the first time, but null when we test it in the second time
otpInputRef?.current.setValue(sms); // <--- Here is the code which is working weird
}
});
}
}
useEffect(() => {
if(Platform.OS === 'android') startReadSMSListerner();
return () => ReadSms.stopReadSMS();
}, [otpInputRef]);
Я полностью запутался в этом, попытался выполнить следующее: ">TypeError: Невозможно прочитать свойство setValue нулевого JavaScript.
Редактировать
Вот как мой OTP TextInput выглядит в JSX
<OTPTextInput
ref={otpInputRef}
defaultValue=""
inputCount={4}
keyboardType="numeric"
returnKeyType="done"
textContentType="oneTimeCode" // for iOS Autofill enable
containerStyle={{justifyContent: 'center', padding: width / 15}}
textInputStyle={styles.textInputContainer}
handleTextChange={(text) => onChangetText(text)}
/>
setValue
изuseRef
и не могу найти упоминания о нем в документации. Где ты это увидел? - person Konstantin   schedule 13.04.2021setValue
— метод ввода текста OTP (см. ссылку в вопросе) - person yuvin   schedule 13.04.2021ref.current?.
вместоref?.current
(сама ссылка всегда определена, но реквизитcurrent
может и не быть). - person Marek Lisik   schedule 13.04.2021ref={otpInputRef}
ссылкой обратного вызова, как это предлагается в примере с компонентом:ref={e => (otpInputRef = e)}
? Просто идея... - person yuvin   schedule 13.04.2021TypeError: "otpInputRef" is read-only
- person Alok   schedule 13.04.2021let
, тогда вместо этого, еслиconst
. Этот компонент вообще работает? :) - person yuvin   schedule 13.04.2021logout
и сноваlogin
. OTP просто2FA
в моей системе. - person Alok   schedule 13.04.2021let
части. Изменениеconst
наlet
для моегоotpInputRef
сработало для меня. Поскольку он был частьюuseRef
, из-за этого он не обновлялся сразу. Теперь у нас естьlet
, он вносит изменения, как только мы назначаем его<TextInput>
:D. Вы спаситель. Пожалуйста, напишите ответ, и я проголосую за него или дайте мне знать, я напишу ответ вкратце для наших будущих разработчиков :D - person Alok   schedule 13.04.2021