firebase 在React返回中运行async函数

2mbi3lxu  于 2023-06-24  发布在  React
关注(0)|答案(2)|浏览(103)

我试图在react返回函数中显示来自firebase数据库的用户名。
我有一个名为getUserName的函数,它从数据库中检索用户名并返回它。

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

然后我试图在react组件的返回中显示它。

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

但我得到了这个错误:Type 'Promise<string>' is not assignable to type 'ReactNode'.ts(2322) const getUserName: () => Promise<string>
不知道我做错了什么。我正在使用TypeScript,所以我需要在某处指定类型吗?

tcomlyy6

tcomlyy61#

错误信息很清楚。要解决这个问题,可以修改getUserName函数,使用useState钩子来存储username并异步更新它。

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

t98cgbkg2#

我建议将API调用放入React.useEffect()并将其存储在状态中。React需要一个ReactNode,如错误中所示,但你的函数返回了一个promise(通过async)。React不会在return语句中解析它。

function functionalComponent() {
 const [username, setUsername] = getState('foo');

 useEffect(() => {
  // async IIFE
  (async () => {
   const username = await db.getUsername();
   setUsername(username);
  })();
 }, []); // <- Indicates to run this once on mount

 return <>{username}</>;
}

相关问题