簡體   English   中英

React 組件在 State 更改后並不總是重新渲染

[英]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 子組件中的文本。 它確實如此。 但有一個問題。 場景:

  1. 默認為 EN。 單擊一次 RO -> 作品。 點擊一次 EN -> 作品;
  2. 默認為 EN。 單擊一次 EN -> 沒有任何反應(正常)。 在 RO 上單擊一次 -> 頁面中沒有任何變化。 控制台日志說 state.language 是 RO。 再次單擊 RO -> 工作。

因此,如果連續單擊任何圖像兩次(或更多),則需要兩次單擊另一個圖像才能實際查看翻譯頁面。 為什么它不能從第一次點擊正確地重新呈現? 在調用渲染方法之前,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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM