React.useState tidak memuat ulang status dari props

Saya mengharapkan status untuk memuat ulang pada perubahan alat peraga, tetapi ini tidak berfungsi dan uservariabel tidak diperbarui pada useStatepanggilan berikutnya , apa yang salah?

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

codepen

Argumen yang diteruskan ke useState adalah keadaan awal seperti keadaan pengaturan dalam konstruktor untuk komponen kelas dan tidak digunakan untuk memperbarui keadaan saat render ulang

Jika Anda ingin memperbarui status pada perubahan prop, gunakan useEffecthook

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>);
}

Demo kerja

Komponen fungsional yang kita gunakan useStateuntuk mengatur nilai awal ke variabel kita, jika kita melewatkan nilai awal melalui props, itu akan selalu menetapkan nilai awal yang sama sampai Anda tidak menggunakan useEffecthook,

misalnya kasus Anda ini akan melakukan pekerjaan Anda

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

Fungsi yang diteruskan ke useEffect akan berjalan setelah render diterapkan ke layar.

Secara default, efek dijalankan setelah setiap render selesai, tetapi Anda dapat memilih untuk mengaktifkannya hanya jika nilai tertentu telah berubah.

React.useEffect(FunctionYouWantToRunAfterEveryRender)

jika Anda hanya mengirimkan satu argumen ke useEffect, metode ini akan menjalankan metode ini setelah setiap render Anda dapat memutuskan kapan harus mengaktifkannya FunctionYouWantToRunAfterEveryRenderdengan meneruskan argumen kedua ke useEffect

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

seperti yang Anda perhatikan, saya sedang melewati [props.user] sekarang useEffecthanya akan mengaktifkan FunctionYouWantToRunAfterEveryRenderfungsi ini jika props.userdiubah

Saya harap ini membantu pemahaman Anda, beri tahu saya jika ada perbaikan yang diperlukan, terima kasih

Parameter yang diteruskan ke React.useState()hanya nilai awal untuk status tersebut. React tidak akan mengenali itu sebagai mengubah keadaan, hanya mengatur nilai defaultnya. Anda akan ingin menyetel status default pada awalnya, lalu memanggil secara bersyarat setUser(newValue), yang akan dikenali sebagai status baru, dan merender ulang komponen.

Saya akan merekomendasikan dengan hati-hati memperbarui status tanpa beberapa jenis kondisi untuk menjaganya dari terus-menerus memperbarui, dan karena itu rendering ulang setiap alat peraga diterima. Anda mungkin ingin mempertimbangkan untuk mengangkat fungsionalitas status ke komponen induk dan meneruskan status induk ke Avatar ini sebagai penyangga.

Menurut dokumentasi ReactJS tentang Hooks :

Tetapi apa yang terjadi jika teman prop berubah saat komponen ada di layar? Komponen kami akan terus menampilkan status online teman yang berbeda. Ini adalah bug. Kami juga akan menyebabkan kebocoran memori atau crash saat melepas karena panggilan berhenti berlangganan akan menggunakan ID teman yang salah.

Satu-satunya interaksi Anda di sini harus terjadi pada perubahan alat peraga, yang tampaknya tidak berhasil. Anda dapat (masih menurut dokumen) menggunakan componentDidUpdate (prevProps) untuk secara proaktif menangkap pembaruan apa pun ke props.

PS: Saya tidak memiliki cukup kode untuk menilai, tetapi tidak bisakah Anda secara aktif mengaturUser () di dalam fungsi Avatar (props) Anda?

Di dunia react, Anda harus memperbarui status Anda dalam fungsi componentWillRecieveProps (nextProps), dalam kasus seperti itu.