состояние становится неопределенным после асинхронного вызова

Question

Попытка понять, почему состояние компонента становится неопределенным. Перед асинхронным вызовом консоль показывает this.state.pubsubtopics как [], после вызова она становится неопределенной

код:

class PubSubTopics extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            pubsubtopics: [],
        };
    }

    componentDidMount() {
        console.log('after component mounted');
        console.log(this.state.pubsubtopics);
        this.callBackEndAPI()
            .then(res =>
                this.setState({pubsubtopics: res.express}))
            .catch(err => console.log(err));
        console.log('after setting state');
        console.log(this.state.pubsubtopics);
    }

    callBackEndAPI = async () => {
        const response = await fetch('/listtopics');
        const body = await response.json();

        if(response.status !== 200){
            throw Error(body.message)
        }
        return body;
    }

    handlePrintStateClick = () => {
        console.log(this.state.pubsubtopics);
    }

    render(){
        return(
            <div>
                <ul>
                </ul>
                <button onClick={this.handlePrintStateClick}>printState</button>
            </div>
        )
    }
}

Журналы (последняя запись в журнале от нажатия кнопки):

after component mounted
index.js:16 []
index.js:21 after setting state
index.js:22 []
index.js:36 undefined

Answer 1

res.express не существует в ответе сервера, использование res.topics решило проблему