React-native 渲染的钩子比预期少。这可能是意外过早造成的

问题描述 投票：0回答：1

Tengo 在 vista 上出现问题，并在本机中做出反应，出现错误：渲染的钩子比预期的少。这可能是意外提前退货导致的

pero no entiendo porque si aparentemente todo lo tengo bien.

tengo una vista 校长 que es esta:

//import liraries
import React, {useEffect, useState} from 'react';
import {View, Text, StyleSheet, SafeAreaView, ScrollView} from 'react-native';
import {Button, TextInput, Icon} from 'react-native-paper';
import ProgressLoader from 'rn-progress-loader';

import LogoVerticalWithName from '@infrastructure/resources/svg/vertinal-logo-with-name.svg';
import {styles} from './styles';
import i18n from '@translations';
import {useToken} from './hooks/useTokenValidate';
// create a component
const Token = ({navigation, route}) => {
  const {token, loading, setToken, cancelToken, confirmWithdrawalCash} =
    useToken(navigation, route);
  return (
    <SafeAreaView style={styles.container}>
      <ProgressLoader
        visible={loading}
        isModal={true}
        isHUD={true}
        hudColor={'#0000'}
        color={'#ffff'}
      />
      <ScrollView
        automaticallyAdjustKeyboardInsets={true}
        showsVerticalScrollIndicator={false}
        style={styles.container}>
        <View style={styles.containerView}>
          <LogoVerticalWithName style={styles.svg} />
          <View
            style={{
              width: '100%',
              paddingHorizontal: 40,
              paddingVertical: 20,
              marginTop: 20,
            }}>
            <Text style={{color: '#fff', textAlign: 'center', fontSize: 16}}>
              {i18n.t('token.message.body')[0]}
              {'\u00A0'}
              <Text style={{fontWeight: '700'}}>
                {i18n.t('token.message.code')}
              </Text>
              {'\u00A0'}
              {i18n.t('token.message.body')[1]}
            </Text>
          </View>
          <TextInput
            mode="outlined"
            label={i18n.t('token.message.code')}
            style={[styles.inputText, {marginTop: 10}]}
            outlineStyle={{borderRadius: 10}}
            activeOutlineColor={'#FFF'}
            outlineColor={'#FFF'}
            theme={{
              colors: {
                onSurfaceVariant: '#FFF',
              },
            }}
            textColor={'#FFF'}
            value={token}
            onChangeText={text => setToken(text)}
          />
          <View
            style={{
              width: '100%',
              marginTop: 20,
              flexDirection: 'row',
              justifyContent: 'space-evenly',
            }}>
            <Button
              style={styles.buttonCancel}
              labelStyle={styles.labelButtonCancel}
              mode="contained"
              onPress={cancelToken}>
              {i18n.t('common.cancel')}
            </Button>
            <Button
              style={styles.button}
              labelStyle={styles.labelButton}
              mode="contained"
              onPress={confirmWithdrawalCash}>
              {i18n.t('common.confirm')}
            </Button>
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

//make this component available to the app
export default Token;

y tengo un funcion de la cual exporto toda lalogica de la vista que es esta:

import React, {useState, useEffect} from 'react';
import {Alert} from 'react-native';
import {useDispatch, useSelector} from 'react-redux';
import DeviceInfo from 'react-native-device-info';

//// librerias locales
import {
  setDefaultReceive,
  setDefaultSend,
  setPaymentInstrument,
  setToken,
  setIsLogin,
  setBoundAmountPin,
  setPointsDop,
  setUserPoints,
  setAccountType,
  setSessionActive,
  setUserData,
  setUsernameAuth,
  setPasswordAuth,
  setTokenExpiration,
  setTokenType,
  setHasPin,
  setDeviceInfo,
  setWisenrollAuth,
  setOperationTypes,
} from '@data/store/slices/reducer';
import {
  linkDeviceApi,
  loginApi,
  cancelTokenLoggedApi,
  cancelTokenGuestApi,
  tokenValidationLoggedApi,
  tokenValidationGuestApi,
  getPaymentInstruments,
  pendingTokenGuestApi,
  acceptRecharge,
  acceptWithdraw,
  tokenConfirmWithdrawalCash,
} from '@data/modules';
import i18n from '@translations';
import {LOGIN, CHANGE_PASSWORD, HOME, SUCCESS} from '@route';
import {najoUserKey, najoPasswordKey} from '@env';
import {handleErrorResponse} from '@infrastructure/hooks/global';

export const useToken = (navigation, route) => {
  const {token: _token_, account_type} = useSelector(store => store.auth);
  const {deviceInfo: deviceI} = useSelector(store => store.device);
  const [movement, setMovement] = useState(null);
  const [loading, setLoading] = useState(true);
  const [token_touched, setTokenTouched] = useState(false);
  const [token, setToken] = useState(null);
  const {movementType, operation_type, movement: itemDetail} = route.params;

  useEffect(() => {
    startFunc();
  }, []);
  
  const startFunc = async () => {
    const {movement} = route.params;
    console.log('====================================');
    console.log('item', movement);
    console.log('====================================');
    setMovement(movement);
    getPendingTokenGuest();
  };

  const getPendingTokenGuest = async () => {
    // const deviceI = deviceI
    const savedDeviceInfo = JSON.parse(deviceI);
    const imei = await DeviceInfo.getUniqueId();
    const body = {
      ...savedDeviceInfo,
      action: movement.operation_type_name,
      imei,
    };
    const response = await pendingTokenGuestApi(body);
    console.log('getPendingTokenGuest / response: ', response);
    if (response.ok) {
      if (response.data.pending_token_code == 'False') {
        console.log('====================================');
        console.log('Respuesta: ', movement.operation_type_name);
        console.log('====================================');
        if (movement.operation_type_name === 'recharge') {
          sendTokenRecharge();
          console.log('====================================');
          console.log('entro en recarga:', movement.operation_type_name);
          console.log('====================================');
        } else {
          sendTokenWithdraw();
          console.log('====================================');
          console.log('entro en withdrawal:', movement.operation_type_name);
          console.log('====================================');
        }
      }
      setLoading(false);
    } else {
      setLoading(false);
      Alert.alert('Error', response.message.text);
    }
    // try {
    // } catch (e) {
    //   setLoading(false);
    //   await handleErrorResponse(e);
    //   console.log('pending token guest api / dashboard/token / error: ', e);
    //   const errorMessageCode = e.message.code;
    //   const shouldGoBack =
    //     errorMessageCode === 'PGCT' || errorMessageCode === 'PGTC02';
    //   Alert.alert('Error', e.message.text, [
    //     {
    //       text: i18n.t('login.ok'),
    //       onPress: () => {
    //         return shouldGoBack ? navigation.navigate(HOME) : null;
    //       },
    //     },
    //   ]);
    // }
  };

  const sendTokenRecharge = async () => {
    try {
      // const { movement } = route.params;
      const deviceInfo = deviceI;
      const savedDeviceInfo = JSON.parse(deviceInfo);
      const body = {
        ...savedDeviceInfo,
      };
      const response = await acceptRecharge(movement.id, body);
      if (response.ok) {
        setLoading(false);
      } else {
        setLoading(false);
        Alert.alert('Error', response.message.text);
      }
    } catch (error) {
      setLoading(false);
      await handleErrorResponse(error);
      console.log('sendToken / error: ', error);
      Alert.alert('Error', i18n.t('error.request'));
    }
  };

  const sendTokenWithdraw = async () => {
    try {
      // const { movement } = route.params;
      const deviceInfo = deviceI;
      const savedDeviceInfo = JSON.parse(deviceInfo);
      const body = {
        ...savedDeviceInfo,
      };
      const response = await acceptWithdraw(movement.id, body);
      if (response.ok) {
        setLoading(false);
      } else {
        setLoading(false);
        Alert.alert('Error', response.message.text);
      }
    } catch (error) {
      setLoading(false);
      await handleErrorResponse(error);
      console.log('sendToken / error: ', error);
      Alert.alert('Error', i18n.t('error.request'));
    }
  };

  const confirmWithdrawalCash = async () => {
    try {
      // const { movement } = route.params;
      const deviceInfo = deviceI;
      const savedDeviceInfo = JSON.parse(deviceInfo);
      const imei = await DeviceInfo.getUniqueId();
      setLoading(true);
      let data = {
        ...savedDeviceInfo,
        action: movement.operation_type_name,
        token_code: token,
        extra_data: {
          pending_operation: movement.id,
        },
        imei,
      };
      const response = await tokenConfirmWithdrawalCash(data);
      if (response.ok) {
        // navigation.replace(MESSAGE_ROUTE, {response});
        console.warn('SE CONFIRMO EL TOKEN');
      } else {
        Alert.alert('Error', response.message.text);
      }
      setLoading(false);
    } catch (e) {
      console.log('confirmWithdrawalCash / error: ', e);
      setLoading(false);
      await handleErrorResponse(e);
      const errorMessageCode = e.message.code;
      const shouldGoHome =
        errorMessageCode === 'PGTC02' || errorMessageCode === 'PGP107';
      Alert.alert('Error', e.message.text, [
        {
          text: i18n.t('login.ok'),
          onPress: () => {
            return shouldGoHome ? navigation.navigate(HOME) : null;
          },
        },
      ]);
    }
  };

  const isFormDisabled = () => {
    const emptyFiled = hasEmptyField({token: token});
    return emptyFiled;
  };
  const cancelToken = async () => {
    try {
      // const { movement } = route.params;
      setLoading(true);
      const deviceInfo = deviceI;
      const savedDeviceInfo = JSON.parse(deviceInfo);
      const body = {
        ...savedDeviceInfo,
        imei: savedDeviceInfo?.mac_address,
        action: movement.operation_type_name,
        extra_data: {transaction_id: movement.id},
      };

      let response = {};
      const token = _token_;
      if (token) {
        response = await cancelTokenLoggedApi(body);
      } else {
        response = await cancelTokenGuestApi(body);
      }

      if (response.ok) {
        navigation.goBack();
      } else {
        if (response.message.code === 'PGCT')
          //Token expired
          navigation.goBack();
      }

      setLoading(false);
    } catch (e) {
      setLoading(false);
      await handleErrorResponse(e);
      console.log('make payment / token.js / submitPayment / e: ', e);
      const errorMessageCode = e.message.code;
      const shouldGoBack =
        errorMessageCode === 'PGCT' || errorMessageCode === 'PGTC02';
      Alert.alert('Error', e.message.text, [
        {
          text: i18n.t('login.ok'),
          onPress: () => {
            return shouldGoBack ? navigation.navigate(HOME) : null;
          },
        },
      ]);
    }
  };

  return {
    token,
    loading,
    setToken,
    cancelToken,
    confirmWithdrawalCash,
  };
};

el tema es que me da el error y he Buscado aparentemente todo lo tengo bien no se porque me da el error

需要解决问题并解决问题

reactjs react-native react-native-navigation
1个回答
0
投票

这是英语中的独奏。 Si necesita ayuda, puede preguntar en https://es.stackoverflow.com/.

由于没有太多西班牙语内容，因此在导航时出现问题。需要提供信息，但可以进行导航。没有 puedo decir la razon en Español。

英文： 你好杰拉德。该论坛仅用于英语提问。如果您需要帮助，请访问西班牙语网站。我不太会说西班牙语，但您的问题可能与导航呼叫有关。但是，我没有足够的信息来确定到底是什么原因。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.