ReactJS bileşenleri ne zaman AJAX çağrılarını durumdan güncelleştirmek için çağırır?

Bir varlık hakkında bilgi görüntüleyen bir React bileşenim var. Varlığın kimliği bir mülkten geçirilir. Bileşen, varlığı almak ve çağrı tamamlandığında/başarısız olduğunda durumu güncelleştirmek için "componentDidMount" içinde bir AJAX çağrısı başlatır.ReactJS bileşenleri ne zaman AJAX çağrılarını durumdan güncelleştirmek için çağırır?

Bu özellik, öğe kimliği değiştiğinde (sahne aracılığıyla) bileşenin yeni verileri almaması dışında iyi çalışır.

"componentWillReceiveProps" içinde bir arama başlatmayı denedim ancak bu aşamada hala eski özellikler ayarlanmış. NextProps AJAX çağrı yöntemine geçmek zorunda ve bu doğru görünmüyor.

Bir bileşenin bir özellik değişikliğine yanıt olarak durumunu zaman uyumsuz olarak güncellemesinin en iyi/en temiz yolu nedir?

kaynak

2015-06-08 David Tinker

. Belgelerden: Bu ('componentWillReceiveProps'), 'this.setState()' kullanarak durumu güncelleyerek render() 'den önce bir geçiş geçişine tepki vermek için bir fırsat olarak kullanın. Eski sahne bu this.props üzerinden erişilebilir. This.setState() 'işlevini bu işlev içinde çağırmak, ek bir işlemi tetiklemez. Öte yandan, bileşenin aramadan önce güncellenmesini istiyorsanız, 'componentDidUpdate 'aradığınız şey olduğunu düşünüyorum. – gcedo

Veri akışınızı merkezileştirmeyi düşünmenizi öneririm, böylece bu tür akışları yönetmek daha kolay olur. – WiredPrairie

Evet, sanırım baba, AJAX çağrısını mağazada tetikleyen eylemi gerçekleştirmeli. Ardından mağazadan alınan verileri sahne olarak çocuklara iletin. – gcedo

-2

Haklısınız, componentWillReceiveProps numaralı telefondan aramanız en iyi yolu bulamaz.

Flux mimarisini denemenizi öneririz, böylece verileriniz bir mağazada "merkezi" olabilir. Varlık kimliği değiştiğinde, verileri getiren ve yeni verilerle mağazayı güncelleyen bir eylemi tetikleyin. Mağaza güncellendiğinde, bir olay yayacaktır ve bileşenler yeni verilerle işlenecektir.

kaynak

2015-06-08 19:17:04

Soruyu izole etmek için birçok şeyi basitleştirdim. Bizim app bileşeni aslında AJAX çağrısı yapmaz (API katmanı yapar) ve doğrudan veri almaz, Baobab gelir. Ancak sorun aynı kalıyor: Bir bileşen özellik değişikliğinin bir zaman uyumsuzluğunu bir şekilde veya başka bir şekilde tetiklemesi gerekiyor. –

Burada Flux için bir kullanım durumu göremiyorum, yazar sadece sahne değişiminde bileşeni yenilemek istiyor. – Jacka

Ayrıca tepki vermek için yeni biriyim, bu yüzden Flux mimarisi benim için biraz korkutucu. Ben AJAX ilk verilerini yüklemek için componentWillMount kullanarak dediniz tam olarak yapıyorum ve yine sahne değiştiğinde/o zaman componentWillReceivePropsnextProps yeni verileri yüklemek için: Ben en iyi anı aldı düşünüyorum

var Table = React.createClass({ 
    getInitialState: function() { 
    return { data: [] }; 
    }, 

    componentWillMount: function(){ 
    this.dataSource(); 
    }, 

    componentWillReceiveProps: function(nextProps){ 
    this.dataSource(nextProps); 
    }, 

    dataSource: function(props){ 
    props = props || this.props; 

    return $.ajax({ 
     type: "get", 
     dataType: 'json', 
     url: '/products?page=' + props.page + "&pageSize=" + props.pageSize 
    }).done(function(result){ 
     this.setState({ data: result }); 
    }.bind(this)); 
    }, 

    render: function() { 
    return (
     <table className="table table-striped table-bordered"> 
     <Head /> 
     <Body data={this.state.data}/> 
     </table> 
    ); 
    } 
});

kaynak

2015-12-01 13:26:05 wnm

Akı rotasını sürdürmekten kaçındığınızda, bu kullanım şekli oldukça fazladır. Verileri getirme ve oluşturma işlemi arasında net bir ayrım yapmayı düşünmek için bir refactoring yapmak, render() gibi bir şey yapmaktan tamamen imkansız bir şey yapmaktır. ' –

componentWillMount() hemen önce çağrılır montaj gerçekleşir. Render() 'den önce çağrılır; bu nedenle, bu yöntemde eş zamanlı olarak ayarlanması yeniden oluşturmayı tetiklemez. Bu yöntemde herhangi bir yan etkisi veya aboneliği tanıtmaktan kaçının. –

ReactJS bileşenleri ne zaman AJAX çağrılarını durumdan güncelleştirmek için çağırır?

cevap

İlgili konular