如何解决反应路线强制更新useState
我对react intl和用于设置实际语言的状态的useState遇到问题。 当我更改语言时,页面没有重新加载,并且所选语言是我实际设置的。 当我尝试用选定的语言加载新页面时,会发生问题。
例如,如果当我更改为“ us”时将其设置为“ it”,则反应没有重新加载所有页面并设置新状态,当从“首页”更改为另一页面时,似乎国际组件被完全刷新并将状态设置为
APP.JS
const Root = () =>{
return(
<BrowserRouter history={browserHistory} >
<Switch>
<Route exact path="/" component={Index}/>
<Route exact path="/work" component={Work}/>
<Route exact path="/contatti" component={Contact}/>
<Route exact path="/me" component={Me}/>
<Route exact path="/blog" component={Blog}/>
<Route exact path="/risorse" component={Risorse}/>
<Route exact path="/blog-pagina" component={BlogDetails}/>
<Route path="/404" component={error404}/>
<Route component={error404}/>
</Switch>
</BrowserRouter>
)
}
ReactDOM.render(<IntlProviderWrapper><Root/></IntlProviderWrapper>,document.getElementById('root'));
IntlContext
export const IntlContext = React.createContext();
export const IntlProviderWrapper = ({ children }) => {
const [locale,setLocale] = useState("it");
const [messages,setMessages] = useState(it);
return (
<IntlContext.Provider value={{ setLocale,setMessages,it,us,cn}}>
{console.log("renderizzo intl")}
<IntlProvider locale={locale} messages={messages} defaultLocale="it">
{children}
</IntlProvider>
</IntlContext.Provider>
);
}
LanguageSwitch
const LanguageSwitch = () => {
const intl = useContext(IntlContext);
var languages = ["US","CN","IT"]
const onSelectFlag =(countryCode) =>{
if(countryCode === 'US') {
intl.setLocale("us")
intl.setMessages(intl.us)
}
if(countryCode === 'CN') {
intl.setLocale("cn")
intl.setMessages(intl.cn)
}
if(countryCode === 'IT') {
intl.setLocale("it")
intl.setMessages(intl.it)
}
}
return (
<>
<ReactFlagsSelect defaultCountry="IT" countries={languages} onSelect={onSelectFlag} showSelectedLabel={false} />
</>
);
};
export default LanguageSwitch
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。