React.useState, durumu props'tan yeniden yüklemiyor

Durum değişikliğinde yeniden yüklenmesini bekliyorum, ancak bu çalışmıyor ve userdeğişken bir sonraki useStatearamada güncellenmiyor , sorun nedir?

function Avatar(props) {
  const [user, setUser] = React.useState({...props.user});
  return user.avatar ? 
         (<img src={user.avatar}/>)
        : (<p>Loading...</p>);
}

Codepen

UseState'e iletilen argüman, bir sınıf bileşeni için yapıcıdaki durumu ayarlamaya çok benzeyen ilk durumdur ve yeniden oluşturmada durumu güncellemek için kullanılmaz

Destek değişikliğindeki durumu güncellemek istiyorsanız, useEffectkancayı kullanın

function Avatar(props) {
  const [user, setUser] = React.useState({...props.user});

  React.useEffect(() => {
      setUser(props.user);
  }, [props.user])

  return user.avatar ? 
         (<img src={user.avatar}/>)
        : (<p>Loading...</p>);
}

Çalışma demosu

useStateDeğişkenimize başlangıç ​​değerlerini ayarlamak için kullandığımız fonksiyonel bileşenler , eğer ilk değeri props üzerinden geçirirsek, siz useEffecthook'u kullanmayana kadar her zaman aynı başlangıç ​​değerini ayarlayacaktır.

örneğin davanız işinizi yapacak

 React.useEffect(() => {
      setUser(props.user);
  }, [props.user])

UseEffect'e aktarılan işlev, render ekrana işlendikten sonra çalışacaktır.

Varsayılan olarak, efektler tamamlanan her işlemeden sonra çalışır, ancak bunları yalnızca belirli değerler değiştiğinde tetiklemeyi seçebilirsiniz.

React.useEffect(FunctionYouWantToRunAfterEveryRender)

useEffect'e yalnızca bir argüman iletirseniz, bu yöntemi her işlemeden sonra çalıştırır FunctionYouWantToRunAfterEveryRender, useEffect'e ikinci argümanı ileterek bunu ne zaman başlatacağınıza karar verebilirsiniz.

React.useEffect(FunctionYouWantToRunAfterEveryRender, [props.user])

[props.user] 'ı geçiyorum fark ettiğiniz gibi şimdi useEffectbu FunctionYouWantToRunAfterEveryRenderişlevi yalnızca props.userdeğiştirildiğinde çalıştıracak

Umarım bu, anlayışınıza yardımcı olur, herhangi bir iyileştirme gerekiyorsa bana bildirin, teşekkürler

Aktarılan parametre React.useState(), yalnızca bu durum için başlangıç ​​değeridir. React bunu durumu değiştirmek olarak algılamayacak, sadece varsayılan değerini ayarlayacak. Başlangıçta varsayılan durumu ayarlamak ve ardından koşullu olarak çağırmak setUser(newValue)isteyeceksiniz, bu yeni bir durum olarak tanınacak ve bileşeni yeniden oluşturacak.

Sürekli güncellenmesini önlemek için bir tür koşul olmaksızın durum güncellemesini dikkatli bir şekilde tavsiye ederim ve bu nedenle her sahne alındığında yeniden oluşturulmasını tavsiye ederim. Durum işlevselliğini bir ana bileşene yükseltmeyi ve üst öğenin durumunu bu Avatar'a bir destek olarak aktarmayı düşünebilirsiniz.

Hook'larla ilgili ReactJS belgelerine göre :

Peki, bileşen ekranda iken arkadaş propu değişirse ne olur? Bileşenimiz farklı bir arkadaşın çevrimiçi durumunu göstermeye devam edecek. Bu bir hata. Ayrıca abonelikten çıkma çağrısı yanlış arkadaş kimliğini kullanacağından, bağlantıyı keserken bellek sızıntısına veya çökmeye neden oluruz.

Buradaki tek etkileşiminiz, işe yaramayacak gibi görünen bir sahne değişikliğinde gerçekleşmelidir. Props'taki herhangi bir güncellemeyi proaktif olarak yakalamak için bir componentDidUpdate (prevProps) kullanabilirsiniz (yine de belgeye göre).

Not: Yargılamak için yeterli kodum yok, ancak Avatar (props) işlevinizin içine aktif olarakUser () ayarlayamaz mısınız?

React dünyasında, bu gibi durumlarda componentWillRecieveProps (nextProps) fonksiyonunda durumunuzu güncellemelisiniz.