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

Question

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

我的目标是当用户点击一个按钮时它会改变语言并且要改变语言必须刷新页面

当点击按钮时：

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

问题是：

forceUpdate() is not working

渲染器和构造器：

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 文件的数据

Answer 1

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

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

这是一个 example 的动作。

我没有发现您的代码有任何问题，这似乎更多是网格组件无法更新的问题。您正在正确更新状态。

希望对您有所帮助！

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

Why forceUpdate doesn't work after click button?

javascript

reactjs

ag-grid

ag-grid-react