Как правильно сделать fetch в моем случае (Promise pending)?

Question

[jondoeonoe]

Добрый вечер.
Есть массив, с помощью map я отрисовываю каждый элемент массива.
Есть вопрос по одному моменту связанный с фетчем.

<img src={this.getPromoUrl(tweet.id, "image")} />

Тут я использую функцию

getPromoUrl = (id, param) => {
    const fetchData = this.getPromise(id, param);

    console.log(fetchData);

    return fetchData;
  };

  getPromise = async (id, param) => {
    let data;

    try {
      const response = await fetch(`https://someurl/api/v1/statuses/${id}/card?access_token=${process.env.REACT_APP_KEY}`);
      const json = await response.json();

      data = json[param];
    } catch (e) {
      console.log(e);
    }

    return data;
  };

Но, как и ожидаемое, получаю Promise pending при return fetchData

// В консоле все ок, строка
    console.log(fetchData);

У меня вопрос, как мне сделать так, чтобы я адекватно получил строку из fetchData, я не совсем понимаю просто. Это из-за того, что ф-я getPromise асинх? Как мне быть, я уже просто не знаю, я был бы благодарен за пример/решение в моем случае. Уже около часа - полтора убил на это ...

Answer 1

[Антон Спирин]

getPromoUrl = async (id, param) => {
  const data = await this.getPromise(id, param);
  console.log(data);   
  this.setState({ data });
};

или:

getPromoUrl = (id, param) => {
  this.getPromise(id, param).then(data => {
    console.log(data);   
    this.setState({ data });
  });
};

Хорошо изучите API Promise.

Comments

[jondoeonoe]

У меня вопрос, эта функция у нас же в ретерне рендера Реакта, разве у нас не будет бесконечно в стейт дата попадать?

[Антон Спирин]

jondoeonoe, Не надо такое писать в методе render. Пишите данные в state, рендер будет вызван после обновления state, в нем просто используйте данные.:

render() {
  return <div>{this.state.data}</div>;
}

[jondoeonoe]

Антон Спирин, просто у меня существует цикл объектов, и при определенном значении (например в тексте сообщения есть href), вызываю эту функцию. Из-за этого другого варианта не знаю

[Антон Спирин]

jondoeonoe, вы что-то явно неправильно делаете. Если вы забираете с сервера объекты, а потом забираете promoUrl, то забирайте данные сразу с объектами.
Так как делаете вы делать не надо.

[jondoeonoe]

Антон Спирин, дел в том, что одна часть, массив объектов с текстом находится по одному урлу апи, а promoUrl по другому урлу апи

[Антон Спирин]

jondoeonoe, ну придумайте решение. Делайте запросы за promoUrl, сразу по приходу ответа с основными данными, дополняйте данные promoUrl, затем пишите в state.

[jondoeonoe]

Антон Спирин, Так щас и делаю. То есть в одном стейте хранить массив объектов из promoUrl?

[Антон Спирин]

jondoeonoe, да. Грубо говоря только как получили все данные обновляйте state.