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