Jalankan fungsi async pada React return-Soal Jawab Rangkaian PHP Cina

Artikel Topik pembelajaran Muat turun Soal Jawab Kamus Pengaturcaraan Permainan kemas kini terkini

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Jalankan fungsi async pada React return

P粉545682500 2023-09-07 17:31:08

429

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

Saya mempunyai fungsi yang dipanggilgetUserNameyang 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 (  Hi, {getUserName()}! 
 )

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?

P粉545682500

membalas semua (1)

P粉0091864692023-09-08 00:16:12 Tingkat 1

Mesej ralat sangat jelas. Untuk membetulkannya, anda boleh mengubah suaigetUserName函数以使用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 (  Hi, {userName}! 
 ); };