从 Promise 访问 HTML 元素的值

Question

我是 React 和 javascript 的新手，需要一些帮助。我正在使用一个返回包含接口的 Promise 的函数。我想访问接口中的变量并将其应用到<dl><dt>{//string variable}</dt></dl>。

问题是我只得到一个 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().then((name) => console.log(name)); 名称是一个字符串。但是如何将其存储为字符串变量并使用它呢？

Answer 1

你正在使用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>
  );
}