Tal vez tengo lo que parece ser un problema básico, pero simplemente no pude encontrar una solución a este problema. Estoy pasando la función handleSubmit, que es asíncrona, pero no devuelve ningún valor, de un componente de formulario principal a uno secundario. Después de llamarlo en un componente secundario, quiero borrar las entradas y cerrar el modal. En mi caso, los valores de entrada se borran y el modal se cierra antes de que handleSubmit haya terminado de ejecutarse. Estoy usando React con TypeScript en este proyecto. Si alguien pudiera ayudarme estaría agradecido. Gracias por adelantado
const createVariation = (variationType: string, variationValues: string[]): void => { setLoading(true); setTimeout(() => { storeProductVariant(product.id, variationType, variationValues, accessToken) .then(() => { showProductVariants(product.id, accessToken) .then((response) => { dispatch(actionsProducts.showProductVariants(response.data.data)); }); showProductSkus(product.id, accessToken) .then((response) => { dispatch(actionsProducts.showProductSkus(response.data.data)); }); setLoading(false); }) .catch((error) => { setError(error.response.data.errors.variant[0]); setLoading(false); setTimeout(() => { setError(''); }, 3000); }); }, 1000);};
const onSubmit = (event: React.FormEvent<HTMLFormElement>): void => { event.preventDefault(); if (validateInputs( inputValues.variationType, inputValues.variationValues, )) { handleSubmit(inputValues.variationType, inputValues.variationValues, variantId);El problema está aquí ya que no puedo llamar a .then() porque la función es nula
setInputValues({ variationType: '', variationValues: [], variation: '', }); handleClose(); setSelectedVariations([]); }};
Lo que necesita podría ser un poco complejo, sin embargo, puede lograrlo siguiendo los siguientes pasos:
Mantenga una variable de estado en el componente principal, por ejemplo, submissionDone como loading . Y pase esto a su componente hijo.
Actualice el submissionDone hecho a true cuando la promesa se resuelva en el padre.
El valor modificado/actualizado de submissionDone se reflejará en el componente secundario.
Borre sus entradas o cualquier otra cosa en el componente secundario en función de esta variable.
Dado que no ha proporcionado el código completo, le doy una pista de que esta lógica en el componente secundario se puede escribir dentro de un useEffect si está usando un componente funcional o componentDidUpdate si está usando componentes de clase.