在翻译(i18n)时发现json文件附加字符串的问题

我已经成功地翻译了我的网站项目中的许多页面，但现在我已经开始翻译创建的特定组件，并且它不起作用。

我得到的错误信息如下:"TypeError: Cannot read properties of undefined (reading 'titulo')">

**注:我使用NextJS和TailwindCSS

这是JSON文件字符串的代码，它应该抓取翻译，我有两个文件，一个用于ES(西班牙语)，另一个用于EN(英语)


"heroBanner":{
        "titulo": "Ayudamos a PYMES a Captar la Atención mediante Publicidad Digital",
        "subtitulo": "BIENVENIDO A COTTONMEDIA"
    },

这是我传递道具的组件代码:

import React from 'react'
import Custom__Cursor from './Custom__Cursor'
function Hero__Banner(props) {
  
  return (
    <div>
      <div className="relative h-screen">
        <div className="h-full w-full">
          <video autoPlay muted loop className="object-cover h-screen w-full ">
            <source src="/AdsBgVideo.mp4" type="video/mp4">
            </source>
          </video>
        </div>
        <div className="absolute top-0 h-full w-full bg-black opacity-60 z-10"></div>
        <div className="absolute top-1/4 z-20 max-w-screen-md md:max-w-screen-xl">
          <div className='flex flex-col px-10 space-y-5'>
            <p className='text-left text-sm md:text-base font-medium tracking-wide filter drop-shadow-md'>{props.titulo}</p>
            <p className='text-left text-4xl md:text-5xl leading-normal md:leading-relaxed filter drop-shadow-md'>{props.subtitulo}</p>
          </div>
        </div>
      </div>
    </div>
  )
}
export default Hero__Banner

然后，在渲染组件的地方，我已经将这些道具包含在字符串中，以便获得如下翻译:

import Head from 'next/head'
import Image from 'next/image'
import Hero__Banner from '../components/Hero__Banner'
import ScrollToTop from '../components/ScrollToTop'
export default function Home(props) {
  const { index, heroBanner } = props;

  return (
    <div>
      <Head>
        <title></title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/short-logo.svg" />
      </Head>
      
      {/*Main content */}
      {/* Hero section */}
      <Hero__Banner 
        titulo={heroBanner.titulo}
        subtitulo={heroBanner.subtitulo}
      />
    </div>
  )
}
export async function getStaticProps({locale}) {
  const response = await import(`../lang/${locale}.json`);
  return {
    props: {
      index: response.default.index,
      heroBanner: response.default.heroBanner
    },
  };
}

即使在这样做之后，我仍然得到相同的错误，不确定为什么会发生这种情况。组件翻译现在在"pages"中的索引页上，所以我认为它应该可以工作。正如您在代码中看到的，我已经在索引中翻译了一些部分，它们工作得很好。

错误图像

有什么建议吗?

当您使用i18n进行翻译并得到此错误时，可能是因为您更改了翻译JSON文件，并且需要重新启动服务器。这就是我的情况，希望这对你有帮助。

相关内容

最新更新

热门标签：