Reactjs api导航而不被点击

在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>
);

const{state，PinCode}=useContext（Context）；
const[vCode，setvCode]=useState（“”）；
useffect（（）=>{
PinCode（{vCode}）；
}, []);
返回(
德宾验证酒店
安格拉·艾尔科迪戈·埃莫斯·恩维亚多·努梅罗。
setvCode（newvCode）}
值={vCode}
自动更正={false}
autoCapitalize='characters'
/>
PinCode（{vCode}}}>
羡慕
难道没有证据证明这一点吗？
再入者
);

})

---

任何帮助都将不胜感激

您的问题根源在于此代码片段

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

当依赖的数据将被更改时，可以调用Hook useffect。 但是，如果将“[]”作为第二个参数传递，那么在安装组件时，内部代码只执行一次。这就是你的情况。 更多信息

---

正如我从代码中看到的，您只需删除这个useffect，一切都会正常工作，正如您所希望的。

no，我删除了useffect并留下了PinCode（{vCode}）；但是它仍然可以导航，用户不做任何事情来修复它，这样{useffect（（）=>{if（vCode）{PinCode（{vCode}）；}}，[vCode]）；如果您希望在用户更新新vCode后自动发送新vCode，这是一个很好的解决方案。但这里可能存在一个问题，即当用户键入新值时，您将发送所有中间值。如果您只需要在用户单击按钮后发送数据，则不应使用钩子useEffect。