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

Question

I'm working of the internationalization of my app using https://github.com/yankouskia/localize-react . I have the following App 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>
    );
  }
}

This is the language selector component:

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

Clicking the flag in Language component should translate the text in the App child components. And it does. But there's a catch. Scenarios:

1. Default is EN. Click once on RO -> works. Click once on EN -> works;
2. Default is EN. Click once on EN -> nothing happens (normal). Click once on RO -> nothing changes in the page. Console log says state.language is RO. Click RO once again -> works.

So if any of the images is clicked twice(or more) in a row, it takes two clicks on the other one to actually view the translated page. Why doesn't it rerender properly from the first click? The state.language is always the proper one before the render method is called. Console sample:

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

So the issue here is - the translations function below is not returning the new translations to the router. Also the disableCache on your demo website is false which should be set to true .

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

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

I would suggest to write your localization component as a learning experience - It would be similar to your language change function which will return the key from object translations = { en: 1, fr: 2 }

Also try to use es6 arrow functions.