Errore 'too many request' quando uso state in React

di il
5 risposte

Errore 'too many request' quando uso state in React

Buonasera, sto facendo un'applicazione con React per il frontend e Node con Express per il backend.

Premessa: sono uno studente di quinta superiore, e questo è un compito; inoltre ci tengo a precisare che non voglio avere la soluzione e basta, ma vorrei capire il motivo per cui mi si presenta questo problema…

Sostanzialmente, il backend prende i dati da un database mysql e il frontend richiama il backend con axios (o fetch) e ottiene i dati desiderati. Si tratta di un database relazionale contenente delle specie animali.

Ora ho un problema, perchè quando  faccio la chiamata al backend in questo modo non ottengo nessun problema

axios.get(`http://127.0.0.1:8080/info/species/${ selectedPark }`)
        .then(res => console.log(res.data.result)

Invece, quando scrivo il seguente codice, react mi da questo errore: R_CON_COUNT_ERROR: Too many connections

axios.get(`http://127.0.0.1:8080/info/species/${ selectedPark }`)
        .then(res => setSpecies(res.data.result))

Immagino che sia un errore di mysql che comunica che sono state effettuate troppe richieste. Come vedete però l'unica cosa che ho aggiunto è una funzione (setSpecies) che si occupa di salvare i dati in species, che ho definito usando lo state di React:

const [species, setSpecies] = useState([])

Non riesco a capire: il codice fa la stessa identica cosa e le stesse richieste al backend sia nel primo codice che nel secondo, ma nel secondo caso il programma si blocca. Qualcuno riuscirebbe a spiegarmi il perchè? Grazie mille  

5 Risposte

  • Re: Errore 'too many request' quando uso state in React

    Sicuro che sia mysql a generare l'eccezione e non il web server? Il codice errore restituito è un 429?

  • Re: Errore 'too many request' quando uso state in React

    Io controllerei che non ci sia un “effetto collaterale” a fronte del trattamento dei dati scaricati, ad esempio una reiterazione continua della richiesta di download degli stessi dati.

    Basta premere F12 nel browser e usare i tool appositi (scheda “Rete” o “Network”) per controllare lo scambio client/server che avviene tra la pagina e il server a cui si appoggia.

  • Re: Errore 'too many request' quando uso state in React

    Potrebbe dipendere dal fatto che non hai incluso la fetch dati all'interno di una useEffect() di react.

  • Re: Errore 'too many request' quando uso state in React

    Grazie per le risposte

    Innanzitutto: andando nella sezione rete vedo il seguente risultato, ma non riesco a trovare nulla di “strano”

    @ninja72 non ho capito cosa intendi… nella useEffect faccio una chiamata ad un'altra funzionalità del mio backend, ma quella non da nessun problema, mentre la chiamata che da problemi viene effettuata in questo modo nel return

    function searchSpecies () {
        axios.get(`http://127.0.0.1:8080/info/species/${ selectedPark }`)
        .then(res => setSpecies(res.data.result))
    }
    return (
    	<div className="container my-4" id="divTitle">
        	<h1>?? Ricerca</h1>
        	<select className="form-control my-1" onChange={ e => { setSelectedPark(e.target.value) } }>
            	<option hidden disabled selected defaultValue=''>Seleziona un parco</option>
            	{
               	parks.map(p => <option default={ p.nome_parco }>{ p.nome_parco }</option>)
            	}
        	</select>
        	{ selectedPark !== '' ? searchSpecies() : null }
    	</div>
    )

    Vi spiego meglio il contesto: l'utente deve sceglire da un menu quale parco vuole visitare, e in seguito vengono mostrate le specie presenti in questo parco. In questo codice controllo se è settato il parco che ha selezionato l'utente e in caso chiamo la funzione searchSpecies, che non fa altro che chiamare il backend.

    Quello che mi fa strano è che se stampo a schermo il risultato della richiesta tutto va bene, mentre se salvo il risultato nello state mi da un errore…

  • Re: Errore 'too many request' quando uso state in React

    Grazie per le risposte

    Innanzitutto: andando nella sezione rete vedo il seguente risultato, ma non riesco a trovare nulla di “strano”

    @ninja72 non ho capito cosa intendi… nella useEffect faccio una chiamata ad un'altra funzionalità del mio backend, ma quella non da nessun problema, mentre la chiamata che da problemi viene effettuata in questo modo nel return

    function searchSpecies () {
        axios.get(`http://127.0.0.1:8080/info/species/${ selectedPark }`)
        .then(res => setSpecies(res.data.result))
    }
    return (
    	<div className="container my-4" id="divTitle">
        	<h1>?? Ricerca</h1>
        	<select className="form-control my-1" onChange={ e => { setSelectedPark(e.target.value) } }>
            	<option hidden disabled selected defaultValue=''>Seleziona un parco</option>
            	{
               	parks.map(p => <option default={ p.nome_parco }>{ p.nome_parco }</option>)
            	}
        	</select>
        	{ selectedPark !== '' ? searchSpecies() : null }
    	</div>
    )

    Vi spiego meglio il contesto: l'utente deve sceglire da un menu quale parco vuole visitare, e in seguito vengono mostrate le specie presenti in questo parco. In questo codice controllo se è settato il parco che ha selezionato l'utente e in caso chiamo la funzione searchSpecies, che non fa altro che chiamare il backend.

    Quello che mi fa strano è che se stampo a schermo il risultato della richiesta tutto va bene, mentre se salvo il risultato nello state mi da un errore…

Devi accedere o registrarti per scrivere nel forum
5 risposte