React Router dove utilizzare AJAX

Question

Sto lavorando su un progetto utilizzando React Router e sto riscontrando alcuni problemi con il flusso di dati.

Su ogni pagina è presente una chiamata AJAX che riceve i dati per il componente. Sono stato li mettendo in componentDidMount:

// Below code is written in ES6 
componentDidMount(){ 
    $.get(someURL, (data)=>{ 
    this.setState({data:data}) 
    }) 
} 

Anche se questo funziona su caricamento iniziale, non ottiene di nuovo chiamato quando (è necessario un aggiornamento manuale) l'URL cambia. Non riesco a trovare un adeguato life cycle per effettuare le chiamate AJAX.

Qualcuno per favore mi illumini con l'approccio corretto per ottenere dati in React Router.

Answer 1

Dopo un po 'di ricerca, this README risolve il problema.

Ci sono 2 soluzioni descritte nel documento:

1. Usa addHandlerKey={true}:

   <Route handler={User} path="/user/:userId" addHandlerKey={true} />

2. uso componentWillReceiveProps anziché componentDidMount.

   • ho finito per usare entrambi, componentDidMount per il caricamento iniziale, componentWillReceiveProps per quelle successive.
   • Poiché condividono lo stesso codice, ho creato una nuova funzione _updateState e l'ho richiamata in entrambi i cicli di vita.

---

Il mio codice ora:

class Classes extends React.Component { 
    componentDidMount(){ this._updateState() } 
    componentWillReceiveProps(){ this._updateState() } 
    _updateState(){ 
    $.get(/*Some URL*/, (data)=>{ 
     this.setState({data:data}) 
    }) 
    } 
}