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

Question

[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' я не могу.

Answer 1

[Егор Живагин]

Вызов 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>
);

Answer 2

[godsplane]

используйте useEffect