0
308
Vistasel botón no toma ningún filtro en el primer clic, en el segundo está funcionando
Estoy llamando a la API y cargando datos en la table cuando las páginas se cargan usando useEffect() . pero una vez que la página se carga, el usuario puede volver a enviarla haciendo clic en el botón usando algún filtro.
el problema es que el usuario debe hacer clic dos veces y luego solo funciona el filtro. Estoy usando formik para crear el formulario y el botón.
const [response, setResponse] = useState([]); const [filters,setFilters]=useState({ certificateNo:"", protoColNo:"", requestStatus:"", sponser:"", country:"", researchTitle:"", noOfSubjects:"", startDate:"", endDate:"", }) useEffect(() => { fetchData(page) }, [page]); const fetchData =async( page:any) =>{ const { certificateNo, protoColNo, requestStatus, researchTitle, sponser,country,noOfSubjects,startDate,endDate} = filters; const param = { ...(certificateNo && { certificateNo: certificateNo }), ...(protoColNo && { protoColNo: protoColNo }), ...(requestStatus && { requestStatus: requestStatus }), ...(researchTitle && {researchTitle: researchTitle}), ...(sponser && { sponser: sponser }), ...(country && { country: country }), ...(noOfSubjects && { noOfSubjects: noOfSubjects }), ...(startDate && { startDate: startDate }), ...(endDate && { endDate: endDate }), }; console.log('Inside fetch data'); const {data} = await axios.get(`http://localhost:3000/api/certificates?page=${page}`,{ params: param, }) console.log("Inside data :"+data.data); setResponse(data.data); setFlag(true); setLastPage(data.meta.last_page); } el siguiente código está llamando a fetchData
const handleSubmit =async (values:any)=>{ console.log("Inside the handle Submit"); setFilters(values); //Here I am setting filter value. fetchData(page); } Aquí el botón se define dentro formik . que error estoy haciendo
<Formik initialValues={formInitialSchema} validationSchema={formValidationSchema} onSubmit= {handleSubmit}> <button className="btn btn-success btn-block " type="submit"> </Formik>1 Respuestas
Responde la pregunta0
El problema es de su función handleSubmit . Está intentando obtener datos utilizando los valores de filtro, pero establece los valores de filtro en el formulario que obtiene los datos. El problema principal es que setState de React es asíncrono y es posible que el estado no haya cambiado antes de que se llame a fetchData(page)
const handleSubmit =async (values:any)=>{ console.log("Inside the handle Submit"); setFilters(values); //Here I am setting filter value. fetchData(page); }Debe crear sus valores de filtro en el momento en que se seleccionan. Esto significa hacer una suposición para darle una pista.
Debería pasar su consulta de filtro a fetchData en su handleSubmit y enviar la solicitud en lugar de establecer los valores en la función. Ejemplo a continuación
const handleSubmit =async (values:any)=> { fetchData(page, values); } En su función fetchData , refactoriza para que se vea así
const fetchData = async(page:any, filters) =>{ const { certificateNo, protoColNo, requestStatus, researchTitle, sponser,country,noOfSubjects,startDate,endDate} = filters; const param = { ...(certificateNo && { certificateNo: certificateNo }), ...(protoColNo && { protoColNo: protoColNo }), ...(requestStatus && { requestStatus: requestStatus }), ...(researchTitle && {researchTitle: researchTitle}), ...(sponser && { sponser: sponser }), ...(country && { country: country }), ...(noOfSubjects && { noOfSubjects: noOfSubjects }), ...(startDate && { startDate: startDate }), ...(endDate && { endDate: endDate }), }; console.log('Inside fetch data'); const {data} = await axios.get(`http://localhost:3000/api/certificates?page=${page}`,{ params: param, }) console.log("Inside data :"+data.data); setResponse(data.data); setFlag(true); setLastPage(data.meta.last_page); }