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

Question

我正在使用https://github.com/yankouskia/localize-react 对我的应用进行国际化处理。 我有以下 App 类。

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>
        )
    }
}

单击语言组件中的标志应该翻译应用程序子组件中的文本。它确实如此。但有一个问题。场景：

1. 默认为 EN。单击一次 RO -> 作品。点击一次 EN -> 作品；
2. 默认为 EN。单击一次 EN -> 没有任何反应（正常）。在 RO 上单击一次 -> 页面中没有任何变化。控制台日志说 state.language 是 RO。再次点击 RO -> 有效。

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

所以这里的问题是 - 下面的翻译函数没有将新的翻译返回给路由器。此外，您的演示网站上的 disableCache 是 false，应设置为 true。

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

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

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

也尝试使用 es6 箭头函数。