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

Question

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

我收到的错误消息如下：“TypeError: 无法读取未定义的属性（读取 '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
    },
  };
}

即使这样做了，我仍然得到同样的错误，不知道为什么会这样。组件翻译现在位于“页面”中的索引页面上，因此我认为它应该可以工作。正如你在代码中看到的，我已经在索引中有一些翻译的部分，它们工作得很好。

Error image

有什么建议吗？

Answer 1

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

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

Problem finding string atached to json file when translating (i18n)

reactjs

next.js

internationalization

i18next