api 无需点击即可导航

Question

我有一个 api 呼叫，在 api 呼叫控件导航到其他屏幕后。问题是，该方法甚至在用户有机会调用该方法之前就自行执行了。我希望用户提供输入，然后调用 api 来验证输入是否正确，然后导航到另一个屏幕。

这是我的 api 代码

const PinCode = dispatch => async ({vCode}) => {
console.log('entro');
try {
    const vSolicitudeId = await AsyncStorage.getItem('SolicitudeId');
    const response = await ForceApi.post('/ValidateCodeController.php', {vSolicitudeId,vCode});
    dispatch({ type: 'guardar', payload: response.data.id});
    console.log(response.data.message);
    console.log(response.data.code);
    navigate('Calculadora',);
} catch (err) {
    console.log(err);
    dispatch({
    type: 'add_error',
    payload: 'Error de Conexion'
    });
}

};

这就是它的名字

const {state, PinCode} = useContext(Context);
  const [vCode, setvCode] = useState('');

  useEffect(() => { 
    PinCode({vCode});
  }, []);
return (
  <View style={styles.container}>
    <View>
      <Text style={styles.textIniciar}>Verificación de PIN</Text>
    </View>
    <View>
      <Text style={styles.Pin}>Ingresa el código que hemos enviado al número registrado.</Text>
    </View>
      <View style={styles.inputContainer}>
          <TextInput style={styles.inputs}
            placeholder="Código"
            underlineColorAndroid='transparent'
            onChangeText={newvCode => setvCode(newvCode)}
            value={vCode}
            autoCorrect={false}
            autoCapitalize='characters'
          />
      </View>
      <TouchableOpacity style={[styles.buttonContainer, styles.loginButton]}  
        onPress={() => PinCode({vCode})}>
        <Text style={styles.loginText}>ENVIAR</Text>
      </TouchableOpacity>
      <View>
      <Text style={styles.Pin}>¿No se ha recibido el código de verificación?</Text>
      <Text style={styles.Pin}>Reenviar</Text>
      </View>
  </View>
);

};

任何帮助将不胜感激

Answer 1

问题的根源在于这段代码

  useEffect(() => { 
    PinCode({vCode});
  }, []);

hook useEffect 可以在依赖的数据发生变化时调用。但是，如果您将“[]”作为第二个参数传递，则在挂载组件时，内部代码将只执行一次。这就是你的情况。更多信息 https://reactjs.org/docs/hooks-effect.html

正如我从你的代码中看到的那样，你可以删除这个 useEffect，一切都应该可以正常工作，如你所愿。

api 无需点击即可导航

api navigates without being clicked on

reactjs

react-native

react-hooks

use-effect