Javascript 使用next js的多语言站点_Javascript_Axios_Next.js

Javascript 使用next js的多语言站点

javascript next.js

Javascript 使用next js的多语言站点,javascript,axios,next.js,Javascript,Axios,Next.js,我正在尝试建立一个包含许多组件的网页组成的网站我想获取每个组件的数据所以我尝试在索引页中使用Promise.all（）但问题是，Api的翻译并不是只有一种语言出现我在next js中使用了国际化路由但是当我只为一个组件制作axios.get（）时，它就可以工作了问题是什么&我该如何解决 header.js import Link from 'next/link'; import { useRouter } from 'next/router'; import en from './l

我正在尝试建立一个包含许多组件的网页组成的网站我想获取每个组件的数据所以我尝试在索引页中使用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;

从“下一个/链接”导入链接；
从“下一个/路由器”导入{useRouter}；
从“./locales/en”导入en；
从“/locales/ar”导入ar；
从“Axios”导入Axios；
从“js Cookie”导入Cookie；
从“react”导入{useState}；
常量头=（）=>{
const router=useRouter（）；
const[langCode，setLangCode]=useState（'en'）；
Axios.defaults.headers.common['Language']=langCode；
const{locale}=路由器；
常量t=locale=='en'？en:ar；
const changeLanguage=（区域设置）=>{
Cookie.set（'lang'，locale）；
push（router.pathname，router.asPath，{locale}）；
设置语言代码（语言环境）；
};
const lang=Cookie.get（'lang'）
返回(
changeLanguage（lang='en'？'ar'：'en'）}>
换郎


{t.home}


);
};
导出默认标题；

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;

import Axios from "axios";
import Header from "../components/Header";
const index = (data) => {
    console.log(data.about);
    console.log(data.services);
    console.log(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”导入Axios；
从“./组件/标题”导入标题；
常量索引=（{data}）=>{
返回(
);
};
index.getInitialProps=async（）=>{
const res=等待Axios.get(`https://api.trueapps.co/api/who-we-are`);
const data=等待res.data.data；
返回{data}；
};
出口违约指数；

&这是我使用Promise.all（）时index.js中的代码

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;

import Axios from "axios";
import Header from "../components/Header";
const index = (data) => {
    console.log(data.about);
    console.log(data.services);
    console.log(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”导入Axios；
从“./组件/标题”导入标题；
常数索引=（数据）=>{
console.log（data.about）；
console.log（data.services）；
console.log（data.team）；
返回(
);
};
index.getInitialProps=async（）=>{
const[关于，团队，服务]=等待承诺([
取回(`https://api.trueapps.co/api/who-we-are`).然后（（r）=>r.json（）），
取回(`https://api.trueapps.co/api/team`).然后（（r）=>r.json（）），
取回(`https://api.trueapps.co/api/services`).然后（（r）=>r.json（）），
]);
返回{about，team，services}；
};
出口违约指数；

看起来您正在将Axios和fetch API混合在一起。也许您需要更改为Axios的get，而不是从下面的代码中获取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};

};

看起来您正在将Axios和fetch API混合在一起。也许您需要更改为Axios的get，而不是从下面的代码中获取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};

};

问题是您正在

axios

中设置默认的

Language

头（

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

中设置默认的

Language

头（

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（），但语言问题仍然存在。请发送示例代码或创建一个代码沙盒，在那里我可以看到真正的问题。使用axios.get（）在“getInitialProps”中抛出此错误=>循环结构，因此，我用Promise.all（）替换了axios.all（），但语言问题仍然存在。请发送示例代码或创建一个代码沙盒，在那里我可以看到真正的问题。