我正在使用ag-agrid做一个小项目,我正在尝试翻译它。

我的目标是,当用户单击按钮时,它会更改语言,并且要更改语言,必须刷新页面

当点击按钮时:

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


问题是:


  forceUpdate()无法正常工作


渲染器和构造器:

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


使用forceUpdate时我做错了什么?

codeSandBox

注意:pt和en是来自json文件的数据

最佳答案

您可以通过将key属性和this.state.language组合添加到AgGridReact组件而不是使用this.forceUpdate()来触发重新渲染。通过单击按钮更改语言时,这应该导致重新渲染:

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


这是一个正在起作用的example

我看不到您的代码有任何问题,这似乎是网格组件无法更新的一个问题。您正在正确更新状态。

希望有帮助!

10-07 14:44