Невозможно отобразить объекты внутри JSX. Выдача ошибки Объекты недопустимы в качестве дочерних объектов 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 'value';
  }

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

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

Answer 1

getSelectedProfiles асинхронный c и возвращает обещание, которое вы пытаетесь отобразить в своем компоненте. Это причина, по которой response выдает ошибку.

Вы не должны выполнять вызовы API в функции рендеринга. Вы можете разделить этот logi c на другой компонент и сделать вызов API в перехватчике componentDidMount lifecycle / useEffect в зависимости от того, какой тип компонента вы пишете

{platformsList.map((item, index) => item.platform_id ? <Child key={index} id={item.platform_id} /> : null
}
...
const Child = ({id}) => {
   const [data, setData]  = useState({});
   const [isLoading, setLoading] = useState(true);
   useEffect(() => {
     const getSelectedProfiles = async(id) => {
        setLoading(true);
        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);
        setData({value: value}); // set the appropriate data here
        setLoading(false);
      }
   }, [id]);

   if(isLoading) return <div>Loading...</div>

   // return the appropriate content here from data. Do not render the object as it is 

}