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});
}, []);

当依赖数据被更改时，可以调用钩子使用效果。 但是，如果您将"[]"作为第二个参数传递，则在挂载组件时，其中的代码将只执行一次。这就是你的情况。 更多信息 https://reactjs.org/docs/hooks-effect.html

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