使用 React Hooks 和 Context API 更改语言

Question

我正在创建一个页面，它可以使用 3 种语言。我创建了 3 个文件，其中包含更改显示文本所需的数据。这个概念是检查用户浏览器语言并相应地显示语言（它工作正常），但也让用户选择通过按钮更改页面的语言（它不起作用）。我使用 Context API 来传递语言和函数来将语言更改为其他组件 - 传递语言有效，但传递函数没有。问题是当我点击按钮时页面没有响应，当它像这样传递时：

changeToPl: changeToPl,

在文章中使用了这种方式：https://medium.com/swlh/react-context-api-hooks-and-functional-state-7c9005b43432

但如果我这样做：

changeToPl: changeToPl(),

我有太多的渲染。包含上下文和语言逻辑的 App 组件下方：

const LanguageContext = React.createContext({
    // language: '',
    // changeLanguage: () => {},
  }
);

const App = () => {

  let detectedLanguage = '';

  if (navigator.language.includes('pl')) {
    detectedLanguage = pl;
  } else if (navigator.language.includes('de')) {
    detectedLanguage = de;
  } else {
    detectedLanguage = en;
  }

  const [userLanguage, setUserLanguage] = useState(detectedLanguage);

  /*const chooseLanguage = (lang) => {
    // setUserLanguage(en);
    localStorage.setItem('lang', 'eeen');
    console.log(lang);
  }*/
  
  const changeToPl = () => {
    setUserLanguage(pl);
    console.log('pl');
  }

  const changeToEn = () => {
    setUserLanguage(en);
    console.log('en');
  }

  const changeToDe = () => {
    setUserLanguage(de);
    console.log('de');
  }

  // let chosenLanguage = userLanguage;

  const usedLanguage = userLanguage || detectedLanguage;


  return (
    <LanguageContext.Provider 
      value={{
        language: usedLanguage,
        changeToPl: changeToPl,
        changeToEn: changeToEn,
        changeToDe: changeToDe,
      }}
    >
      <GlobalStyle />
      <CookieBanner />
      <PopUp />
      <Navbar />
      {/* <Sidebar /> */}
      <Switch>
        <Route exact path='/' component={Home} /> 
        <Route exact path='/artworks/:slug' component={Artwork} />
        <Route exact path='/exhibitions' component={ExhibitionList} />
        <Route exact path='/biography' component={Biography} />
        <Route exact path='/contact' component={Contact} />
        <Route component={Error} />
      </Switch>
    </LanguageContext.Provider>
  );
}


export {App, LanguageContext};

以及包含用于更改语言的按钮的侧边栏组件：

export const Sidebar = ({position, hideSidebar}) => {

  const usedLanguage = useContext(LanguageContext);

  return (
    <>
      <Route exact path='/artworks/:slug'> {/* DISPLAYED ONLY IN ARTWORK COMPONENT */}
        <Link to='/'>
          <BackButton>
            {usedLanguage.language.menu.backToMainPage}
          </BackButton>
        </Link>
      </Route>
      <Sidenav style={{right: position}}>
        <Link to='/' onClick={hideSidebar}>
          <Button text={usedLanguage.language.menu.artworksMenuButton} color={variables.DIMGRAY}/>
        </Link>
        <Link to='/exhibitions' onClick={hideSidebar}>
          <Button text={usedLanguage.language.menu.exhibitionsMenuButton} color={variables.DIMGRAY}/>
        </Link>
        <Link to='/biography' onClick={hideSidebar}>
          <Button text={usedLanguage.language.menu.biographyMenuButton} color={variables.DIMGRAY}/>
        </Link>
        <Link to='/contact' onClick={hideSidebar}>
          <Button text={usedLanguage.language.menu.contactMenuButton} color={variables.DIMGRAY}/>
        </Link>
        <LanguageButtonsWrapper>
      <Button text='pl' color={variables.DIMGRAY} onClick={LanguageContext.changeToPl} />
      <Button text='en' color={variables.DIMGRAY} onClick={LanguageContext.changeToEn} />
      <Button text='de' color={variables.DIMGRAY} onClick={LanguageContext.changeToDe} />
    </LanguageButtonsWrapper>
        <SocialButtons>
          <SocialButtonIcon href='https://www.facebook.com/StructuralistArt/'>
            <AiFillFacebook />
          </SocialButtonIcon>
          <SocialButtonIcon href='https://www.instagram.com/structuralist_art/'>
            <AiFillInstagram />
          </SocialButtonIcon>
          <SocialButtonIcon href='https://www.behance.net/michalkrol263a63?fbclid=IwAR1LWaRyvVuh9UuM3MHByTYgqDOKG8Qo7h6mQq7tTM3ezJXU-HQ4Wtq09i8'>
            <AiFillBehanceSquare />
          </SocialButtonIcon>
        </SocialButtons>
      </Sidenav>
    </>
  )
}

我知道用于更改语言的函数可能更通用（3 合 1），上下文数据可能在单独的文件中，我必须使用 localStorage，但现在我想处理所描述的问题。

Answer 1

好的，我想通了。问题是我的应用程序的结构和顺便说一句。我之前问过的事情:) 因为我想构建可重复使用的按钮，所以它看起来像这样：

export const Button = ({text, color, clickHandler}) => {

  return (
    <AppButton onClick={clickHandler} style={{color: color}}>
      {text}
    </AppButton>
  );
};

因此我需要像这样传递 changeToPl/changeToEn/changeToDe 函数：

<Button text='pl' color={variables.DIMGRAY} clickHandler={usedLanguage.changeToPl} />

不是这样的：

<Button text='pl' color={variables.DIMGRAY} onClick={usedLanguage.changeToPl} />

Answer 2

似乎您的按钮应该使用上下文提供的功能，即usedLanguage.changeToPl 而不是LanguageContext.changeToPl：

const usedLanguage = useContext(LanguageContext);

...

<Button text='pl' color={variables.DIMGRAY} onClick={usedLanguage.changeToPl} />
<Button text='en' color={variables.DIMGRAY} onClick={usedLanguage.changeToEn} />
<Button text='de' color={variables.DIMGRAY} onClick={usedLanguage.changeToDe} />

您还应该确保初始上下文值与组件实际使用的形状相匹配。

const LanguageContext = React.createContext({
  language: '',
  changeToPl: () => {},
  changeToEn: () => {},
  changeToDe: () => {}
});