Antd Modal не может появиться, когда я установил visible в true. Почему это?

Question

Я хочу добавить функцию загрузки в мое приложение реакции. И подробности, когда нажмите кнопку загрузки. Появится модал с таблицей (пустой в начале), и таблица загружается, и, наконец, данные отображаются после разбора Excel. Но после щелчка я установил для видимого состояния значение true, но оно не работает, оно всегда отображается после анализа Excel.

Я добавил несколько аннотаций о результатах отладки в коде.

Наконец я обнаружил, что если я использую

setTimeout (this.getExcelData, 100, e.file) // И время ожидания не может быть слишком маленьким

вместо

this.getExcelData (e.file)

модал может отображаться по желанию, а тайм-аут 100 может быть проигнорирован, потому что время разбора Excel достаточно велико.

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

const columns = [
  {
    title: 'Id',
    dataIndex: 'id',
    key: 'id',
    width: "20%",
  },
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    width: "40%",
  },
  {
    title: 'Status',
    dataIndex: 'status',
    key: 'status',
    width: "40%",
  }
];

class UploadButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {visible: false,
                  excelLoading: false,
                  data: []
  }

  ...some handleOK, handleCancel function

  getExcelData = fileObj => {
    const fileReader = new FileReader();
    fileReader.onload = e => {
      ...some xlsx parse process
      this.setState({
        excelLoading: false
        data: data
      });
    };
    fileReader.readAsBinaryString(fileObj);
  };

  uploadExcel = e => {
    this.setState({
      excelLoading: true,
      visible: true
    });
    this.getExcelData(e.file);
  };

  render() {
    return (
      <div>
        <Upload beforeUpload={() => false)}
                onChange={this.uploadExcel} >
          //The button loading works here
          <Button loading={this.state.excelLoading} >upload</Button> 
        </Upload>
        //the log here is all true after upload click and setState data
        {console.log(this.state.visible)}
        <Modal
          visible={this.state.visible}
          ...
        >
           //If i remove the table, the modal still shows up only after excel parsing!!!(no matter whether where is a table)
           <Table columns={columns}
                  loading={this.state.excelLoading}
                  dataSource={this.state.data} />
        </Modal>
      </div>
    );
  }
}