React не могу правильно вытащить переменные, чтобы рендерить их в компоненте?

Question

[ummahusla]

Я реально немного ступор поймал, и понять не могу, почему в коде ниже не могу выбрать переменные из API запроса.

...

const StoryItem = (props) => {

  let id, time, score, url, title, author;

  if(props.storyId !== "") {
    api.getStoryItem(props.storyId)
      .then((response) => {
        if(response.data) {
          id = response.data.id;
          time = response.data.time;
          score = response.data.score;
          url = response.data.url;
          title = response.data.title;
          author = response.data.by;
        }
    });
  }

  return (
    <div>
      <ul>
        <li>
          {props.storyId} {title}
        </li>
      </ul>
    </div>
  );

};

...

Answer 1

[d-virt]

Ошибка заключается в том, что переменные инициализируются позже ретурна - это обусловлено тем, что идет вызов асинхронного запроса.

Собственно, что бы понять на практике, вставьте console.log и посмотрите, что, когда сработает.

const StoryItem = (props) => {

  let id, time, score, url, title, author;

  if(props.storyId !== "") {
    api.getStoryItem(props.storyId)
      .then((response) => {
        if(response.data) {

console.log('init var');
          id = response.data.id;
          time = response.data.time;
          score = response.data.score;
          url = response.data.url;
          title = response.data.title;
          author = response.data.by;
        }
    });
  }

console.log('return result');
  return (
    <div>
      <ul>
        <li>
          {props.storyId} {title}
        </li>
      </ul>
    </div>
  );

};

Comments

[ummahusla]

Да, я обратил на это внимание, и я сейчас конвертирую из стейтлесс функции в класс, и запихну апи респонс в стейт и потом сделаю цикл. Спасибо за подсказку.

[d-virt]

Не за что.

[Антон]

ummahusla: да, все верно, это должен быть класс. Запрос к api должен вызываться где-нибудь в конструкторе, а результат заноситься в стейт