React 组件在状态更改后并不总是重新渲染

Question

我正在使用 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>
        )
    }
}

单击语言组件中的标志应翻译 App 子组件中的文本。确实如此。但有一个陷阱。场景：

默认为英文。单击一次 RO -> works。单击 EN -> works;
默认为英文。单击 EN -> 没有任何反应（正常）。在 RO 上单击一次 -> 页面中没有任何变化。控制台日志显示 state.language 是 RO。再次点击RO -> works.

因此，如果连续两次（或多次）单击任何图像，则需要单击两次另一图像才能实际查看翻译后的页面。为什么它不能从第一次点击正确地重新呈现？在调用 render 方法之前，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

Answer 1

所以这里的问题是 - 下面的翻译功能没有 return 将新的翻译发送到路由器。此外，您的演示网站上的 disableCache 是 false，应设置为 true。

见https://github.com/yankouskia/localize-react/issues/5

 <LocalizationProvider
        disableCache={IS_LOCALIZE_CACHE_DISABLED}
        locale={this.state.language}
        translations={TRANSLATIONS}
      >

我建议将您的本地化组件编写为一种学习体验 - 它类似于您的语言更改功能，它将 return 来自对象翻译的密钥 = { en : 1 , fr : 2}

也尝试使用es6的箭头函数。

React 组件在状态更改后并不总是重新渲染

React Component Does not Always Rerender After State Change

javascript

render

reactjs