Получение неопределенного при использовании this.state.в рендере на jsx (шутка / энзим)

Question

В настоящее время я определяю компонент и создаю несколько значений состояния со значениями по умолчанию.Один из них, в частности, является объектом, этот, в частности, «перегенерируется» в componentDidMount.Код работает как шарм, проблема возникает, когда я пишу свой тест для этого.Проблема, с которой я сталкиваюсь, заключается в том, что «this» не определено в render ().

//component
class HealthGrades extends Component {
  constructor(props) {
    super(props);
    this.onBtnCk = this.onBtnCk.bind(this);
    this.state = {
      tabKey: ‘record’,
      tabData: [],
      tblCol,
      patId:null    
    };
  }

  componentDidMount() {
    this.props.fetchHealthTabsData(this.props)
      .then(() => {

        this.setState({
          tabData: getTabData(this.props.drInfo, this.state.tabKey),
          tblCol: modelUtils.fetchNewObj(tblCol, 
          this.props.patientData.data.patientType),
        });
      });
  }

  render() {
    return (

        <DataGrid
          cols={this.state.tblCol[this.state.tabKey]} //complains that 'this' is undefined (first one)
          rows={this.state.tabData}
          isActive={this.props.isActive}

        />


)}

Попытка понять, почему каждый раз, когда я выполняю рендеринг в моем тесте, this.state.tblCol не определен:

  const wrapper = shallow(<HealthGrades {...props} />);