Estoy enviando una solicitud POST a un punto final para reaccionar usando axios y si mi respuesta devuelta es exitosa, estoy configurando algún estado.

Aquí está mi código:

 axios.post('/some/endpoint', {mydata}) .then(res => { console.log(res.data); if(res.data.success) { setMsg('successful'); setActive('alert alert-success fade-out'); } else { setMsg('Oops! An error occured!'); setActive('alert alert-danger'); } })

Después de la primera solicitud de API, todo está bien, recibo el mensaje y se desvanece, aunque si intento enviar otra solicitud, no vuelve a aparecer y comienza a desvanecerse, ¿por qué no se activan las llamadas setMsg y setActive? ?

Aquí está el render:

 return ( <> <Modal open={open} onClose={onCloseModal} center closeIcon={closeIcon} modalId="response-modal"> <div className="qr-modal-header-stock"> <h5>Enter fulfillment stock</h5> <p>{title}</p> <p>Fulfilment Center: {fulfilmentCenterName}</p> <p>Existing stock: {stock}</p> <p className={active} style={{opacity:0}}>{msg}</p> <-- this appears firstly but not the second time when I submit the form, why? <form onSubmit={handleSubmit}> <input type="hidden" name="ean" value={data} /> <input type="hidden" name="product_stock" value={newStock} /> <input type="number" class="form-control" onChange={e => setNewStock(parseInt(e.target.value) + parseInt(stock))}/> <br /> <input type="submit" class="btn btn-primary form-control" id="submit-fulfilment-center" value="Save"/> </form> <br /> <p>New stock: {isNaN(newStock) ? 0 : newStock}</p> <button className="btn btn-primary" onClick={onCloseModal}>Scan another ean</button> </div> </Modal> </ > );