Javascript 从Promise for HTML元素访问值

我不熟悉React和javascript，需要一些帮助。我正在使用一个函数，它返回一个包含接口的承诺。我想访问接口中的变量，并在

{//string variable}

中应用它

问题是我只得到一个Promise对象，我需要它作为字符串。我该怎么做

这是我的异步函数，用于获取Promise对象并使用它：

async function getName() {
  const res = await getNamePromise(); // type: Promise<Interface>
  console.log(res.name);
}

export function userInfo(){
return(
<dl>
    <dd>{// need a string variable}</dd>
</dl>
);
} 

异步函数getName（）{ const res=await getNamePromise（）；//类型：Promise console.log（res.name）； } 导出函数userInfo（）{ 返回( {//需要一个字符串变量} ); } 什么时候可以这样写：

---

getName（）.then（（name）=>console.log（name））名称是一个字符串。但是如何将其存储为字符串变量并使用它呢？
您使用的是React，因此您应该将api调用和html标记放入React组件中，并使用组件状态保存api响应数据以触发重新渲染，请尝试以下操作：

function NameComponent() {
  React.useEffect(() => {
    async function getName() {
      const res = await getNamePromise(); // type: Promise<Interface>
      setName(res.name)
    }

    getName()
  }, [])

  React.useEffect(() => {
    async function getPhoto() {
      const res = await getPhotoPromise(); // type: Promise<Interface>
      setPhoto(res.photo)
    }

    getPhoto()
  }, [])

  const [name, setName] = React.useState()
  const [photo, setPhoto] = React.useState()

  if (!name || !photo) {
    return <div>Loading...</div>
  }

  return(
    <dl>
      <dd>{name}</dd>
      <dd>{photo}</dd>
    </dl>
  );
} 

函数名组件（）{
React.useffect（（）=>{
异步函数getName（）{
const res=await getNamePromise（）；//类型：Promise
集合名（res.name）
}
getName（）
}, [])
React.useffect（（）=>{
异步函数getPhoto（）{
const res=await getPhotoPromise（）；//类型：Promise
setPhoto（res.photo）
}
getPhoto（）
}, [])
const[name，setName]=React.useState（）
const[photo，setPhoto]=React.useState（）
如果（！name | |！photo）{
返回加载。。。
}
返回(
{name}
{photo}
);
} 
这很有效！但是，如果我想得到多个变量并将它们作为字符串，我需要为每个变量创建一个新的组件吗？我更新了我的答案，也可以把它们放到同一个组件中，当组件太大时，考虑把它拆分成其他组件。