Объекты недействительны как дочерние объекты React (найдено: [object Promise]) в рендере реакции

Question

У меня есть компонент React на основе классов. Это дочерний компонент, и состояние происходит от другого родительского компонента. Это JSX, и он находится внутри функции карты. Внутри функции карты есть большой JSX-код, но я помещаю только соответствующую часть.

{platformsList.map((item, index) => (
{item.platform_id ? (
<div>
   {this.getSelectedProfiles(item.platform_id)}
</div>)) : ''}

Соответствующая функция написана над методом рендеринга. Здесь ответ представляет собой объект:

getSelectedProfiles = async(id) => {
    const token = Cookie.get('user-token');
    const headers = {
      'Content-Type': 'application/json',
      authorization: token,
    };
    // Axios request  
    let response = await axios.get(`http://localhost:9999/profiles/${id}`, { headers: headers });
    console.log(response);
    return 'kkk';
  }

Отображаемое сообщение об ошибке: Ошибка: объекты недействительны как дочерние объекты React (найдено: [object Promise]). Если вы хотели отобразить коллекцию дочерних элементов, используйте вместо этого массив.

Поскольку это дочерний компонент, я не хочу сохранять его в состоянии React. Я хочу выполнить этот компонент. Есть ли способ сделать это без сохранения в состоянии. Я новичок в React и не знаю, где я делаю не так.

Answer 1

Функция asyn c возвращает обещание, она не выполняет немедленно и возвращает значение (в данном случае 'kkk'). Кажется, что нет никаких причин, по которым getSelectedProfiles является асинхронным c, поэтому просто удалите это и сделайте его синхронным.

  getSelectedProfiles = (id) => {
    return 'kkk';
  }

Answer 2

Вам нужно await в результате вызова функции:

render () {
  const getSelectedProfiles = async(id) => {
    return 'kkk';
  }
  const selectedProfiles = await getSelectedProfiles(item.platform_id);

  return {item.platform_id ? (
    <div>
     {selectedProfiles}
    </div>) : ''}

Однако у этого есть недостаток, заключающийся в том, что async блокирует. Если операция asyn c в getSelectedProfiles() выполняется долго (например, сетевой запрос), ваш рендеринг зависнет. В этом случае вы должны вместо этого установить состояние вашего компонента.