React setState не будет обновлять вид моей таблицы

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

}

}

После обновления состояния необходимо выполнить повторную визуализацию и обновить 'data = {this.state.education}' в таблице Bootstrap. Однако представление таблицы не меняется.

Answer 1

В вашей функции возврата есть что-то вроде:

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

После того, как состояние ReadyToShow установлено, вы сможете увидеть таблицу Bootstrap с информацией.И изменять состояние готовности readyToShow (возможно, с помощью обратного вызова) только в конце ответа на запрос, отправленный вами для данных.Проблема, которую я вижу, состоит в том, что ваши данные могут не поступать до того, как отреагирует реакция.Такая ситуация случалась со мной много раз.Например, если для получения данных используется 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*  
                         }
                  )



});

, важно сделать так, чтобы состояние ReadyToShow обновлялось после того, как было установлено состояние для образования с помощью обратного вызова для setState.