1

Tengo un useCallback que genera un bucle infinito, este useCallback lo utilizo para hacer un POST a una api, tengo el mismo metodo para el GET y me funciona perfectamente, nose si es por como estoy manejando los formularios que hacen el POST o que. El problema es que la funcion se llama cuando se abre la pagina por primera vez y me gustaria que se ejecute en un momento dado

Este es mi usePost

//    import { useEffect, useCallback, useReducer } from "react";
//    import { SET_DATA, SET_ERROR } from "../actions/fetch";
 //   import {API} from "../API/API";
//    import { fetchReducer, initialState } from "../reducers/fetch";
    
    export const usePost = (endpoint = "", req={}) => {
        const [state, dispatch] = useReducer(fetchReducer, initialState);
        
        const postData = useCallback(async () => {
            try {
                const response = await API.post(`${endpoint}`, req);
                console.log(response.data);
                dispatch({type: SET_DATA, payload: response.data})
            } catch (e) {
                dispatch({type: SET_ERROR});
                console.log(e);
            }
        }, [endpoint, ]);
    
        
        useEffect(() => {
            postData();
        }, [endpoint, postData])
    
        return state;
    }

Este es mi formulario LOGIN que uso para hacer el POST

//import { useState } from "react";
//import { Formik } from "formik";
//import { Row, Col, Form, Button } from "react-bootstrap";
//import * as yup from "yup";
//import { usePost } from "../../hooks/usePost";
//import { useEffect } from "react";

export const Login = () => {
  const schema = yup.object().shape({
    username: yup.string().required("Ingresá un nombre de usuario"),
    password: yup.string().required("Ingresá una contraseña"),
  });

  const initialValue = {
    username: "",
    password: "",
  };

  const [formData, setFormData] = useState(initialValue);

  console.log(formData);
  const { data } = usePost("login/", formData);
  console.log(data);


  
  return (
    <>
      <Row>
        <Col className="text-center">
          <h1>Iniciar Sesión</h1>
        </Col>
      </Row>
      <Row>
        <Formik
          validationSchema={schema}
          onSubmit={setFormData}
          initialValues={initialValue}
        >
          {({ submitForm, handleSubmit, handleChange, values, errors }) => (
            <Form noValidate onSubmit={handleSubmit} className="d-flex flex-column align-items-center gap-3">
              <Form.Group controlId="formGridUsername">
                <Form.Label>Nombre de usuario</Form.Label>
                <Form.Control
                  required
                  type="text"
                  placeholder="Nombre de usuario"
                  name="username"
                  value={values.username}
                  onChange={handleChange}
                  isInvalid={errors.username}
                />
                <Form.Control.Feedback type="invalid">
                  {errors.username}
                </Form.Control.Feedback>
              </Form.Group>

              <Form.Group controlId="formGridPassword">
                <Form.Label>Contraseña</Form.Label>
                <Form.Control
                  required
                  type="password"
                  placeholder="Contraseña"
                  name="password"
                  value={values.password}
                  onChange={handleChange}
                  isInvalid={errors.password}
                />
                <Form.Control.Feedback type="invalid">
                  {errors.password}
                </Form.Control.Feedback>
              </Form.Group>

              <Button variant="primary" onClick={submitForm}>
                Iniciar Sesión
              </Button>
            </Form>
          )}
        </Formik>
      </Row>
    </>
  );
};

Si alguien me puede decir que hacer para cambiar el comportamiento de usePost para que se arregle el array infinito o si me conviene sacar el POST de ahí definitivamente, esta ultima opción no me convendría mucho por que en mi proyecto utilizo mucho el POST entonces queria una funcion que me simplificara el proceso

1
  • 1
    Porque especificas el postData entre los argumentos del useEffect? Commented el 17 oct. 2023 a las 23:02

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.