Question

即使状态正在更新，我也很难更改Bootstrap表的视图。

我做了一些研究，发现 this.setState 是异步的，因此我确保检查并更改了回调函数中的状态。但是，即使在回调函数中，状态也会更改。如果这仍然是 this.setState 问题，我会感到困惑。

export class EduInfo extends React.Component {

constructor(props){
    super(props);

    this.state = {
        education: this.props.incomingClass.degreeEdu
    };

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

updateEdu = (e) => {
    e.preventDefault();
    let newEdu = {...this.props.incomingClass};
    BackEndRestService.updateEdu(newEdu).then(data => {
        this.setState({
            education: data.degreeEdu,
        }, () => console.log(data));
    }).catch(e => {
    console.log(e);
    });
}

render(){
    return(
        <BootstrapTable
        hover
        condensed={true}
        bootstrap4={true}
        keyField={'id'}
        data={this.state.education}
        columns={this.columns}
        />
    );

}

}

状态一旦更新，就应该重新呈现并更新Bootstrap表中的'data = {this.state.education}'。但是，表视图没有改变。

Answer 1

在您的返回函数中，类似以下内容：

   return(
    { (this.state.readyToShow)?
       <div>
              <BootStrapTable ... 
              />
       </div>
        : ''
    } );

设置ReadyToShow的状态后，您应该能够看到带有信息的Bootstrap表。并仅在您发送的数据请求响应的末尾更改状态readyToShow的状态（可能使用回调）。我看到的问题是您的数据可能未在React渲染之前到达。这种情况发生在我很多次。例如，如果使用Axios获取数据：

val axios4data = axios.get(*some link to the controller to get data*).then(function (response) {

 ...
  *make something with the response and set the state of the varable for the data table of the bootstrap table*

     self.setState({education: `dataFromResponse`}, 
                      () =>
                         {
                              *execute call back or code to set the state of readyToShow to true*  
                         }
                  )



});

使用setState的回调设置教育状态后，更新ReadyToShow的状态很重要。

React setState不会更新我的表的视图

1 个答案: