为什么单击按钮后 forceUpdate 不起作用？

Question

I'm doing a little project using ag-agrid and I'm trying to translate it.

My objetive is when user click in a button it change the language and to change the language the page must be refreshed

when click on button:

changeLanguage(lang) {
    this.setState({language: lang},
    this.forceUpdate());
  }

the problem is:

forceUpdate() is not working

render and construtor:

constructor(props) {
    super(props);

    this.state ={
       language: 'pt'
    }

    this.changeLanguage = this.changeLanguage.bind(this);
}


render() {
  return (
<div className="ag-theme-balham" style={{ height: '700px', width: '95%' }}>

  <Row>
    <Button onClick={() => this.changeLanguage('pt')}> PT </Button>
    <Button onClick={() => this.changeLanguage('en')}> EN </Button>                
  </Row>

  <br/>

  <AgGridReact
     //props of grid
     localeText={this.state.language === 'pt' ? pt : en}

  />
</div>
);
}

I'm doing something wrong when I'm using forceUpdate?

codeSandBox

Note: pt and en are data from a json file

Answer 1

You can trigger a re-render by adding a key property in combination with this.state.language to the AgGridReact component instead of using this.forceUpdate() . This should cause a re-render when you change the language via the button clicks:

<AgGridReact
  key={this.state.language}
  ... other props
/>

Here is an example in action.

I don't see any issues with your code, this seems like more of an issue with the grid component failing to update. You are updating state correctly.

Hopefully that helps!

Answer 2

according to Reactjs documentation, re-rendering happens automatically, every time the state gets updated and you don't need to do it manually: https://reactjs.org/docs/react-component.html#forceupdate

however, if you want to add a callback to a state updater, you should use this syntax:

changeLanguage(lang) {
    this.setState({language: lang}, () => {
        this.forceUpdate()
    });
}