Блог

В настоящее время работает над проектом Gatsby и пытается внедрить i18n / internationalization. Я хочу обслуживать английскую и французскую версии моего сайта.

Я следую вместе с этим руководством по реализации этого. Я сталкиваюсь с проблемой, когда дело доходит до использования Context API для создания контекста и передачи его моим компонентам. В руководстве, которому я следую, есть странный синтаксис, в котором я не уверен:

const PageContext = React.createContext<PageContextValue>({})

Вот полный компонент, в котором контекст создается с помощью createContext :

 import React from 'react'
import { useTranslation } from 'react-i18next'

const PageContext = React.createContext<PageContextValue>({})

export const PageContextProvider = ({ pageContext, children }) => {
    const { i18n } = useTranslation()
    i18n.changeLanguage(pageContext.lang)

    return <PageContext.Provider pageContext={pageContext}>{children}</PageContext.Provider>;
}

export const usePageContext = () => React.useContext(PageContext)
  

Это приводит к следующей ошибке:

Что вызывает эту ошибку? Я мало что знаю о Context API, но React.createContext<PageContextValue>({}) синтаксис выглядит странно и выдает ошибку.

createContext Это универсальный метод, поэтому PageContextValue это тип значения вашего контекста. Похоже, что в руководстве не определено это значение (что, на мой взгляд, является проблемой), но вы могли бы сделать это с помощью:

 type PageContextValue = {
  // Your type definition here
}
  

Однако typescript достаточно умен, чтобы определить сам тип, поэтому вы можете просто создать контекст:

 const PageContext = React.createContext({})
  

Обратите внимание, что тип является статическим после его определения, поэтому, если вы действительно передадите {} , это будет тип set, и вы не сможете фактически добавлять значения в свой контекст, иначе вы получите ошибки typescript. Поэтому убедитесь, что:

• Либо определите тип, как показано выше
• Или добавьте значения по умолчанию при создании контекста, чтобы убедиться, что typescript выводит его правильно, например: const PageContext = React.createContext({counter: 0}) это позволило бы вам получить доступ counter к вашему контексту позже без ошибок.

Редактировать: Только что выяснил, что вы не используете typescript. Опубликованный вами учебник написан на typescript! Вы наткнетесь на еще больше ошибок, если продолжите использовать его синтаксис, поэтому я предлагаю вам просто использовать typescript для вашего проекта. Но только для этой ошибки ее можно исправить, удалив универсальный тип ( <PageContextValue> )