无法在onClick事件中更新React中的组件状态

Question

我正在尝试更新此组件的状态并基于onclick事件显示div。状态永远不会通过this.setState方法更新，我在做错什么吗？

import React, { PureComponent } from "react";

export default class TypeAheadDropdown extends PureComponent {

    state = {
        hasClicked: false
    }
    renderSuggestions = () => {
        return this.props.suggestions.map((suggestion, i) => (
            <div key={i} className="type-ahead-text" onClick={e => this.handleClick(e, suggestion)}>
                {suggestion}
            </div>
        ));
    };

    handleClick = (e, query) => {
        this.props.updateSearchQuery(query);
        this.props.fetchSearchResults(e, query);
        this.setState(prevState => ({
            hasClicked: !prevState.hasClicked
        }), () => { console.log(this.state.hasClicked) })
    };

    render() {
        return (this.props.suggestions.length > 0) ? (
            <div className="type-ahead-pane">{this.renderSuggestions()}</div>
        ) : ((!this.state.hasClicked) ?
            <div className="type-ahead-pane">
                <div className="type-ahead-text">
                    No suggestions found for<strong> "{this.props.searchQuery}"</strong>
                </div>
            </div> : null
            );
    }
}