Ho un problema con uno dei miei componenti React. Penso che AJAX non carichi tutto il contenuto da un server esterno prima che React esegua il rendering del componente ChildComp
.Come attendere la risposta AJAX e solo dopo aver eseguito il rendering del componente?
sopra potete vedere l'albero della risposta che è venuta dal server. E questo è il codice del mio componente:
var ChildComp = React.createClass({
getInitialState: function(){
return {
response: [{}]
}
},
componentWillReceiveProps: function(nextProps){
var self = this;
$.ajax({
type: 'GET',
url: '/subscription',
data: {
subscriptionId: nextProps.subscriptionId //1
},
success: function(data){
self.setState({
response: data
});
console.log(data);
}
});
},
render: function(){
var listSubscriptions = this.state.response.map(function(index){
return (
index.id
)
});
return (
<div>
{listSubscriptions}
</div>
)
}
});
Questo sta lavorando bene, ma se cambio il mio ritorno a:
return (
index.id + " " + index.order.id
)
id non è definito. E tutte le altre proprietà dell'oggetto ordine. Perché è così? Se I console.log
la mia risposta dopo la funzione success
fornisce tutti i dati (come nell'immagine). La mia ipotesi è che solo i primi oggetti vengono caricati quando React esegue il rendering del componente e successivamente vengono caricati tutti gli altri oggetti interni. Non posso davvero dire se è così (sembra così strano) né posso dire come risolvere questo problema.
ho provato anche qualcosa di simile
success: function(data){
self.setState({
response: data
}, function(){
self.forceUpdate();
})
}.bind(this)
ma ancora ri-renderizzare accade prima del mio console.log(data)
viene attivato. Come aspettare la risposta AJAX e solo dopo aver eseguito il rendering del componente?
Per garantire che i dati di risposta siano formattati come si desidera, è necessario aggiungere 'dataType:" json "' alla richiesta ajax. Inoltre, puoi provare a registrare il nuovo stato appena ricevuto in 'shouldComponentUpdate'. E infine, verifica quali - se ce ne sono - le proprietà si trovano su 'index.order'. Forse contiene una stringa invece di proprietà. –