Как исправить ошибку «Objects are not valid as a React child»?

Question

[sema-fedotov]

Пытаюсь разобраться в vk mini apps, хочу выводить данные из бд в приложение. Отправляю запрос на node js:

const data = async function getUser() {
	let response = await fetch('http://localhost:3000/user_info?user_id=1', {
		method: 'GET',
		headers: {
			'Accept': 'application/json',
		},
	});
	return response.text();
}

Но мне выводит следующую ошибку в приложении:

Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

Как ее можно решить?

Answer 1

[Александр Черемхин]

проблема в том что вы пытаетесь рендерить не валидный объект Promise.
В вашем сообщении нет фрагмета, где это происходит.
Можно предположить что вы, выводите результат приведенной функции response.text(); что возвращает промис.

Comments

[sema-fedotov]

Вот таким образом, передаю переменную data

const Home = ({ id, go, fetchedUser}) => (
	<Panel id={id}>
		<PanelHeader>Example</PanelHeader>
		{fetchedUser &&
		<Group title="User Data Fetched with VK Bridge">
			<Cell
				before={fetchedUser.photo_200 ? <Avatar src={fetchedUser.photo_200}/> : null}
				description={fetchedUser.city && fetchedUser.city.title ? fetchedUser.city.title + ' ' + fetchedUser.bdate : ''}
			>
				{`${fetchedUser.first_name} ${fetchedUser.last_name}`}
			</Cell>
		</Group>}

		{fetchedUser && data &&
		<Group title="Navigation Example">
			<Div>
				<Button mode="commerce" size="xl" level="2" onClick={go} data-to="persik">
					Show me the Persik, please
				</Button>
			</Div>
			{
				data
			}
		</Group>}
	</Panel>
);

[Александр Черемхин]

data откуда берется ? В props не передаётся она....

[Александр Черемхин]

вот место рендера промиса

{fetchedUser && data &&
    <Group title="Navigation Example">
      <Div>
        <Button mode="commerce" size="xl" level="2" onClick={go} data-to="persik">
          Show me the Persik, please
        </Button>
      </Div>
      {
        data /* !!! это промис скорее всего. здесь дает ошибку*/
      }
    </Group>}
  </Panel>

[sema-fedotov]

Александр Черемхин, Да, что это промис, я уже разобрался, но я не разобрался как это исправить

[Александр Черемхин]

Общий подход
https://ru.reactjs.org/docs/hooks-intro.html
https://ru.reactjs.org/docs/hooks-reference.html

import React, {useEffect, useState} from 'react';

const Example = props => {
    const [data, setData] = useState(null);

    useEffect(() => {   // срабатывает только при mount компонента
        window.fetch('/service')
            .then(res => res.text())
            .then(txt => setData(txt)); // устанавливаем data
    }, []) 

    if (data)
        return <div>{data}</div>;
    else
        return <div>Ждите ответа</div>;
};