Блог

Я новичок в React и javascript и нуждаюсь в некоторой помощи. Я использую функцию, которая возвращает обещание, включая интерфейс. Я хочу получить доступ к переменной в интерфейсе и применить ее <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)); имя — это строка. Но как я могу сохранить это как строковую переменную и использовать ее?

Вы используете 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>
  );
}