Jalankan fungsi async pada React return

Question

Saya cuba memaparkan nama pengguna daripada pangkalan data Firebase dalam fungsi React return.

Saya mempunyai fungsi yang dipanggil getUserName yang mengambil nama pengguna daripada pangkalan data dan mengembalikannya.

const getUserName = async () => {
        try {
            const docRef = doc(db, "users/" + auth.currentUser?.uid);
            const userDocument = await getDoc(docRef);
            const userData = userDocument.data() as UserData;
            const userName = userData.name.split(' ')[0];
            return userName;
        } catch (error) {
            console.error(error)
            return "Failed to Retrieve UserName";
        };
    }

Kemudian saya cuba memaparkannya dalam pengembalian komponen tindak balas.

return (
  <div>
    Hi, {getUserName()}!
  </div>
)

Tetapi saya mendapat ralat ini: 类型“Promise”不可分配给类型“ReactNode”。ts(2322) const getUserName: () => Promise

Tidak pasti apa salah saya di sini. Saya menggunakan TypeScript, jadi adakah saya perlu menentukan jenis di suatu tempat?

Answer 1

Mesej ralat sangat jelas. Untuk membetulkannya, anda boleh mengubah suai getUserName 函数以使用 useState 挂钩来存储用户名 dan mengemas kini secara tak segerak.

import { useState, useEffect } from 'react';

const MyComponent = () => {
  const [userName, setUserName] = useState('');

  useEffect(() => {
    const getUserName = async () => {
      try {
        // some code here
        setUserName(userName);
      } catch (error) {
        console.error(error);
        setUserName("Failed to Retrieve UserName");
      }
    };
    getUserName();
  }, []);

  return (
    <div>
      Hi, {userName}!
    </div>
  );
};