为什么API调用后文章状态未定义

Question

当我从主页按照端点操作时，组件上的文章状态已设置好。我可以在控制台日志中看到此信息，但是在页面上呈现时无法使用该数据。

我创建了一个加载组件，该组件会在返回fetch函数之前进行渲染。

该状态也在页面刷新上消失了，所以这可能是问题的一部分，但我似乎无法解决它。

class Article extends Component {

state = {
    toggleComments: false,
    article: '',
    isLoading: true
}
render() {

    const { isLoading } = this.state;
    if (isLoading) return <Loading />;

    return <div>
        <p>artilce</p>
        {console.log(this.state.article.article, 'article here')}
        <button type="submit">
          <Link to="/articles">Back</Link>
        </button>
        <button onClick={this.handleToggleComments} type="submit">
          comments
        </button>
        {this.state.toggleComments && <Comments />}
      </div>;
}
componentDidMount = () => {
    this.handleFetchArticle();

}

handleToggleComments = () => {
    this.setState((prevState) => ({
        toggleComments: !prevState.toggleComments
    }))
}
handleFetchArticle = () => {
    api.fetchArticle(this.props.articleId)
    .then(article => {
        this.setState({
            article,
            isLoading: false
        })
    })
}
}

我需要能够在控制台日志处访问数据。