Mengapa useEffect saya tidak "mendapat" data sehingga saya perlu mengatasi props kepada komponen lain...?

Question

Saya cuba "mendapatkan" "maklumat pengguna" dari pelayan.

URL API GET ialah: /users/${memberId} userID ialah ID ahli jenis angka (Contoh 4)

Ini soalan saya..

Apabila saya mengklik pada "Ikon pengguna" pada " " Saya harus memaut halaman dan memuatkan maklumat pengguna yang betul

Apabila saya cuba menyemak halaman localhost secara langsung, ia tidak muncul. Tetapi apabila saya mengalih keluar " userId={userData.memberId} " halaman dipaparkan dan menulis semula "userId={userData.memberId}" dan simpan, halaman adalah perkara biasa.

//Header.tsx

useEffect(() => {
    const userGetData = async () => {
      return call(`/users`, 'GET', null)
      .then((res) => {
        const data = res[0]
        setUserData(data);
      });
    };

    userGetData();
  }, [])

...

return(
...
  <div>
      <LoginHeader changeNav={isUser.isLogin} userID={userData.memberId} />
   </div>
)

Pautan dalam "userId={userData.memberId}" digunakan untuk laluan UserPage. Ini ialah console.log(userData)

Masukkan penerangan imej di sini

//LoginHeader.tsx
// UserIcon
            <Link to={`/users/${userID}`}
            state={{userID: userID}}
            className="relative p-2 text-gray-500 bg-transparent"
            >
              <img/>
            </Link>

Masalahnya apabila saya klik pada UserIcon ia tidak berfungsi dan memberikan ralat. Beritahu saya kesilapan <<无法读取未定义的属性（读取'memberId'）>>

Jadi..mengapa kod saya tidak berfungsi? : Klik ikon pengguna -> Pergi ke Halaman Pengguna menggunakan uerl /users/${memberId}. Mengapa useEffect 'GET' tidak berfungsi sehingga saya mengalih keluar prop memberId dalam LoginHeader? ? ?

Answer 1

SebabuserData是未定义. Anda tidak menunjukkan di mana/bagaimana anda memulakannya, tetapi sesuatu seperti ini? :

const [userData, setUserData] = useState();

Ini akan memulakannya kepada 未定义。因此，当组件首次呈现时，您无法从 userData 读取属性，因为它是未定义. Ia mungkin mempunyai nilai pada masa akan datang, tetapi pada masa itu kod itu telah pun membuang ralat.

Satu pilihan adalah untuk memulakannya sebagai objek kosong:

const [userData, setUserData] = useState({});

Dalam kes ini, userData.memberId 不会抛出错误，但会向该组件传递一个 undefined nilai.

Pilihan lain adalah untuk tidak membuat komponen sehingga userData mempunyai nilai:

<div>
  { userData ? <LoginHeader changeNav={isUser.isLogin} userID={userData.memberId} /> : null }
</div>

Pilihan yang anda pilih terpulang sepenuhnya kepada anda. Tetapi perkara utama ialah anda tidak boleh membaca sifat daripada undefined .