Estoy trabajando en react.js. Necesito enviar un formulario mientras intento cerrar la pestaña. He escrito un código en useEffect para activar un evento al cerrar la pestaña. Tengo un botón mientras hago clic en él, el valor del estado cambia a verdadero. Mi problema : al enviar el valor booleano (downloadAll) se conserva el valor falso inicial y ese valor se enviará y almacenará en la base de datos. Tengo dudas sobre si se debe a preventDefault(). No estoy seguro de ello. Si alguien sabe la razón correcta, por favor ayude a resolver mi problema.

 const initialFormState = { downloadAll: false firstname: '', } useEffect(() => { const executeOnClose = (e) => { e.preventDefault(); if(formRegistered){ let confirmationMessage = ""; (e || window.event).returnValue = confirmationMessage; handleSubmit(e) return confirmationMessage ; } } window.addEventListener('beforeunload', executeOnClose); return () => { window.removeEventListener('beforeunload', executeOnClose); } }, [formRegistered]); function formReducer(state, action) { switch (action.type) { case 'INSERT': return { ...state, [action.field]: action.payload } default: return state } } const [formState, dispatch] = useReducer(formReducer, initialFormState) const updateForm = (e) => { if (e.target.name == 'downloadAll') { dispatch({ type: 'INSERT', field: 'downloadAll', payload: true }) } else { dispatch({ type: 'INSERT', field: e.target.name, payload: e.target.value }) } } const handleSubmit = async (e) => { e.preventDefault() const result = await fetch('/api/test-api', { method: 'POST', body: JSON.stringify({ response: formState, type: 'download', anonymousID: anonymousID }) }) setFormRegistered(false) } return( <> <form className={'download-form'} onSubmit={handleSubmit}> {!formRegistered ? ( <Form.Group as={Row} className='mb-3' controlId='formGroupName'> <Form.Label column sm={12}> Name * </Form.Label> <Col sm={12} lg={6}> <Form.Control className='mb-3' name='firstname' type='text' onChange={updateForm} placeholder='Enter First name' required /> </Col> <Col className='resource-download-button-container' sm={12} lg={12}> <a target='_blank' download href='/'> <Button id='resource-download-button' name='downloadAll' onClick={updateForm} variant='dark'> Download All </Button> </a> </Col> </Form.Group> </form> )} </>