Задать вопрос
@TreeFall1

Как вызвать асинхронную функцию в клиентском компоненте?

У меня есть асинхронная функция которая получает данные из бд и возвращает их:
const getOrderError = async (orderId) => {
	try {
		const response = await axios.get(`http://localhost:3010/get-error/${orderId}`);

		if (response.status === 200) { 
			return response.data;
		} else if (response.status === 404) {
			return { message: 'Запись не найдена', details: response.data.message };
		} else {
			return { message: 'Неизвестная ошибка', details: response.data };
		}
	} catch (error) {
		return { message: 'Ошибка при выполнении запроса', details: error };
	}
};

const fetchOrderError = async (orderId) => {
	const orderErrorData = await getOrderError(orderId);
	return orderErrorData;
};

После этого функция вызывается в теле компонента и выводит текст:
<h2 className={styles['title']}>{fetchOrderError()}</h2>

На самом деле я хочу, что бы так работало, но по факту получаю ошибку "Error: async/await is not yet supported in Client Components, only Server Components.". Как мне это исправить? В компоненте есть useState, useEffect и поэтому отказаться от 'use client' я не могу.
  • Вопрос задан
  • 91 просмотр
Подписаться 1 Простой Комментировать
Решения вопроса 1
Krasnodar_etc
@Krasnodar_etc
fundraiseup
Вызов fetchOrderError без await возвращает Promise. Вы не выведите Promise в шаблон

Делается это примерно так:
const [data, setData] = useState(null);

const fetchOrderError = async (orderId) => {
	const orderErrorData = await getOrderError(orderId);
	setData(orderErrorData);
};

useEffect(() => {
  fetchOrderError();
}, []);

return (
    <h2 className={styles['title']}>{data}</h2>
);
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
godsplan
@godsplan
используйте useEffect
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы