[英]react component state change after ajax call but does not rerender component
[英]React Component Does not Always Rerender After State Change
我正在使用https://github.com/yankouskia/localize-react對我的應用程序進行國際化。 我有以下應用程序 class。
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
title: "App title",
language: "EN"
};
this.changeLanguage = this.changeLanguage.bind(this)
}
changeLanguage(language) {
this.setState({
language: language
}, () => { console.log(this.state) })
}
render() {
return (
<LocalizationProvider
disableCache={IS_LOCALIZE_CACHE_DISABLED}
locale={this.state.language}
translations={TRANSLATIONS}
>
<Router>
<section>
<section className="header">
<Header />
</section>
<section className="content">
<Route exact path="/" component={HomePage} />
<Language changeLanguage={this.changeLanguage} />
</section>
<section className="footer">
<Footer />
</section>
</section>
</Router>
</LocalizationProvider>
);
}
}
這是語言選擇器組件:
export default class Language extends Component {
render() {
return (
<div>
<div className="flag-container">
<img onClick={() => this.props.changeLanguage("RO")} src="/static/svg/ro.svg" alt={'romana'} />
<img onClick={() => this.props.changeLanguage("EN")} src="/static/svg/gb.svg" alt={'english'} />
</div>
</div>
)
}
}
單擊 Language 組件中的標志應該翻譯 App 子組件中的文本。 它確實如此。 但有一個問題。 場景:
因此,如果連續單擊任何圖像兩次(或更多),則需要兩次單擊另一個圖像才能實際查看翻譯頁面。 為什么它不能從第一次點擊正確地重新呈現? 在調用渲染方法之前,state.language 始終是正確的語言。 控制台示例:
RO - language before setState
EN - language after setState
app.js:42 render app
header.js:12 render header
app.js:36 {title: "App title", language: "EN"} - console.log in setState() callback
所以這里的問題是 - 下面的翻譯 function 沒有將新的翻譯返回給路由器。 此外,您的演示網站上的 disableCache 為false
,應設置為true
。
見https://github.com/yankouskia/localize-react/issues/5
<LocalizationProvider
disableCache={IS_LOCALIZE_CACHE_DISABLED}
locale={this.state.language}
translations={TRANSLATIONS}
>
我建議將您的本地化組件作為學習經驗編寫 -這將類似於您的語言更改 function 將返回來自 object 的密鑰翻譯 = { en: 1, fr: 2 }
也嘗試使用 es6 箭頭函數。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.