React上下文用于更改语言

Question

我想更改客户端选择的语言上下文，但上下文的值没有改变。我做错了什么?

这是上下文:

import React from 'react'
const LanguageContext = React.createContext({
language: "EN",
setLanguage: () => { }
})
export default LanguageContext

和这里我改变语言:

import React, { useState, useContext } from 'react'
import styled from 'styled-components'
import LanguageContext from '../../Context'
const LanguageButton = () => {
const [isClicked, setIsClicked] = useState(false)
const {language, setLanguage} = useContext(LanguageContext)
const changeLanguage = () => {
setIsClicked(!isClicked)
}
return (
<span>
<Span>
<Button style={{ padding: 0 }} onClick={changeLanguage}>
Language - {language}
</Button>
</Span>
{isClicked ?
<Div style={{ position: 'absolute' }}>
<div><Button onClick={() => setLanguage('BG')} >BG - Bulgarian</Button></div>
<div><Button onClick={() => setLanguage('EN')}>EN - English</Button></div>
</Div> : ''
}
</span>
)
}

Answer 1

由于组件树中没有上下文提供程序，因此将使用默认值，因此setLanguage指的是不做任何事情的setLanguage: () => { }。

你需要一个实际存储状态的组件，然后通过上下文将其提供给所有子组件:

function WithLanguage({ children }) {
const [language, setLanguage] = useState("");
return <LanguageContext.Provider value={{ language, setLanguage }}>{ children }</LanguageContext.Provider>;
}
/* in some top component*/
<WithLanguage>
<LanguageButton />
</WithLanguage>

Answer 2

这是上下文:

import React, { Component } from 'react';
export const Context = React.createContext("english");
export default class LanguageContext extends Component {
state = {
language: localStorage.getItem('currentLanguage') ? localStorage.getItem('currentLanguage') : "english",
name: "adads",
};

componentDidMount() {
console.log("state", this.state)
}
onLanguageChange = language => {
console.log('come', language)
this.setState({ language }, () => { localStorage.setItem('currentLanguage', language) });
};

render() {
return (
<Context.Provider
value={{ ...this.state, onLanguageChange: this.onLanguageChange, }}
>
{this.props.children}
</Context.Provider >
)
}
}

这是app.js文件

import logo from './logo.svg';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Routercontainer from './routercontainer';
import LanguageContext from './context/languageContext';
function App() {
return (
<LanguageContext>
<Routercontainer />
</LanguageContext>
);
}
export default App;

这是const文件

export const GujaratiWords = {
language: 'ભાષા',
Totalpendingamount: "કુલ બાકી રકમ",
Totalwithdrawalamounts: "કુલ ઉપાડની રકમ",
Totalsalary: "કુલ પગાર",
}

export const EnglishWords = {
language: 'language',
Totalpendingamount: "Total pending amount",
Totalwithdrawalamounts: "Totalwithdrawal amounts",
Totalsalary: "Total salary",
Perdaysalary: "Perday salary",
Addedsalary: "Added salary",
date: "date",
amount: "amount",
reason: "reason",
}

这是test.js文件

import React, { Component } from 'react'
import { EnglishWords, GujaratiWords } from './const'
import { Context } from './context/languageContext'
export default class Test extends Component {
render() {
return (
<Context.Consumer>
{
(value) => {
return <>
<select onChange={(event) => 
value.onLanguageChange(event.target.value)} class="form-select" 
aria-label="Default select example">
<option selected={value.language == 'english' ? true 
: false} value="english">  english</option>
<option selected={value.language == 'gujarati' ? 
true : false} value="gujarati">  Guajrati </option>
</select>
<h1>{value.language === 'english' ? EnglishWords.Totalpendingamount : GujaratiWords.Totalpendingamount}</h1>
</>
}
}
</Context.Consumer>
)
}
}