2017-12-30 7 views
5

Hızla değişen bir değerin React olarak görüntülenmesi için önerilen yol ne olurdu? Benim AXIOS konfigürasyonunda benTepki, durumun nasıl güncelleştirileceği

onUploadProgress: progressEvent => { 
    let percentCompleted = Math.round((progressEvent.loaded * 100)/progressEvent.total) 
    this.setState({ avatarUploadPercentage: percentCompleted }) 
} 

<span>Upload progress: {this.state.avatarUploadProgress}</span>

var ama çabuk tabii ve düzeni garanti etmeyeceğini çağrıldığını setState sevmez. Ref yerine kullanmalı mıyım ve iç htmlimi kendim mi değiştirmeliyim?

+0

gibi (savurgan) bir bütün bileşen yaşam döngüsünü tetikleyen olmasa da Bir saniyede bu fonksiyon kaç kez çağrılırdı? – Chris

+0

setState() hızlı bir şekilde çağrılabilir. Bu tür bir kullanımda yanlış bir şey yok. Tabii ki ref'leri kullanmayın ve bu tür bir 'ilerleme' uygulaması için DOM'ı kendiniz manipüle etmeyin. – gokcand

cevap

3

onUploadProgress geri çağrıldığında ne zaman kısıtlama yapılır? Geriçağırımınızı, geri çağırma işleminin çalışacağı frekansı sınırlandıran bir "geri dönme" işlevine sarabilirsiniz. Underscore ve Lodash, geri dönüş yöntemleri sunar.

saniyede bir kez:

onUploadProgress: debounce(progressEvent => { 
    let percentCompleted = Math.round((progressEvent.loaded * 100)/progressEvent.total) 
    this.setState({ avatarUploadPercentage: percentCompleted }) 
}, 1000) 

https://davidwalsh.name/javascript-debounce-function düz olarak filtreleme fonksiyonu.

1

İlerleme durumunu görüntüleyen öğeye erişmek için ref kullanmanız önerilir. Bu durum için setState çağrısı, yalnızca değişmekte olan bir ilerleme çubuğu/değeriyse, render tarafında biraz israflıdır. Yükleme ilerlemeyi görüntülemeye başladığında setState'i çağırın, ardından tamamlandıktan sonra gizlemek için tekrar SetState ayarlayın.

0

avatarUploadPercentage değeri ile ne yapmak istersiniz? Gerçek sayıyı görüntülemeniz gerekiyorsa, diğer cevapta önerildiği gibi setState'i geri yükleyebilir veya domu doğrudan değiştirebilirsiniz. Ancak

o, o, CSS kullanarak yapılabilir dolduruluyor bir ilerleme çubuğunun gösterilmesi eğer hala ref yoluyla eleman değiştirerek, ama

şey [refToProgressBarElement].style.width = `${avatarUploadPercentage}%`

İlgili konular