Я пытаюсь создать веб-сайт, состоящий из одной страницы, содержащей множество компонентов.
Я хочу получить данные для каждого компонента
поэтому я пытаюсь использовать Promise.all()
на индексной странице
но проблема в том, что не отображаются переводы из API, появляется только один язык.
Я использовал интернационализированную маршрутизацию Next.js,
но когда я делаю axios.get()
только для одного компонента, он работает.
В чем проблема и как я могу это решить?
header.js
import Link from 'next/link';
import { useRouter } from 'next/router';
import en from './locales/en';
import ar from './locales/ar';
import Axios from 'axios';
import Cookie from 'js-cookie';
import {useState } from 'react';
const Header = () => {
const router = useRouter();
const [langCode, setLangCode] = useState('en');
Axios.defaults.headers.common['Language'] = langCode;
const { locale } = router;
const t = locale === 'en' ? en : ar;
const changeLanguage = (locale) => {
Cookie.set('lang', locale);
router.push(router.pathname, router.asPath, { locale });
setLangCode(locale);
};
const lang = Cookie.get('lang')
return (
<header>
<button onClick = {() => changeLanguage(lang == 'en' ? 'ar' : 'en')}>
change lang
</button>
<ul>
<li>
<Link href = "/">
<a>{t.home}</a>
</Link>
</li>
</ul>
</header>
);
};
export default Header;
index.js
import Axios from "axios";
import Header from "../components/Header";
const index = ({ data }) => {
return (
<div>
<Header />
<div dangerouslySetInnerHTML = {{ __html: data.details}}/>
</div>
);
};
index.getInitialProps = async () => {
const res = await Axios.get(`https://api.trueapps.co/api/who-we-are`);
const data = await res.data.data;
return { data };
};
export default index;
И это код в index.js
, когда я использую Promise.all()
.
index.js
import Axios from "axios";
import Header from "../components/Header";
const index = (data) => {
console.info(data.about);
console.info(data.services);
console.info(data.team);
return (
<div>
<Header />
</div>
);
};
index.getInitialProps = async () => {
const [about, team, services] = await Promise.all([
fetch(`https://api.trueapps.co/api/who-we-are`).then((r) => r.json()),
fetch(`https://api.trueapps.co/api/team`).then((r) => r.json()),
fetch(`https://api.trueapps.co/api/services`).then((r) => r.json()),
]);
return { about, team, services};
};
export default index;
Похоже, вы смешиваете Axios и fetch API. Возможно, вам нужно перейти на Axios get вместо fetch API из приведенного ниже кода.
index.getInitialProps = async () => {
const [about, team, services] = await Axios.all([
await fetch(`https://api.trueapps.co/api/who-we-are`).then((r) => r.json()),
fetch(`https://api.trueapps.co/api/team`).then((r) => r.json()),
fetch(`https://api.trueapps.co/api/services`).then((r) => r.json()),
]);
return { about, team, services};
};
Не могли бы вы прислать пример кода или создать песочницу кода, где я смогу увидеть реальную проблему.
Проблема в том, что вы устанавливаете заголовок Language
по умолчанию в axios
(Axios.defaults.headers.common['Language'] = langCode;
), но затем делаете запросы, используя fetch
.
Использование axios
для выполнения запросов в index.getInitialProps
должно помочь.
index.getInitialProps = async () => {
const [aboutRes, teamRes, servicesRes] = await Promise.all([
Axios.get(`https://api.trueapps.co/api/who-we-are`),
Axios.get(`https://api.trueapps.co/api/team`),
Axios.get(`https://api.trueapps.co/api/services`)
]);
return {
about: aboutRes.data,
team: teamRes.data,
services: servicesRes.data
};
};
использование axios.get() вызывает эту ошибку => Круговая структура в "getInitialProps", поэтому я заменяю axios.all() на Promise.all(), но проблема с языком все еще существует