React Context API не обновляет состояние после асинхронного вызова

Итак, вы забыли об обязательном действии. В JokeStat.js связать действие в

        <JokesContext.Provider
                value = {{
                    joke: this.state.joke,
                    getJoke: this.getJoke.bind(this)
                }}
            >
                {this.props.children}
            </JokesContext.Provider>

Или изменить

    async getJoke() {
        console.info("get joked triggered");
        const joke = await fetchJoke();
        console.info(joke,'joke')
        console.info("state", this.state);
        this.setState({ joke });
    }

к

     getJoke = async() => {
        console.info("get joked triggered");
        const joke = await fetchJoke();
        console.info(joke,'joke')
        console.info("state", this.state);
        this.setState({ joke });
    }

или 3-й вариант

     <JokesContext.Provider
         value = {{
           joke: this.state.joke,
           getJoke: ()=>this.getJoke()
          }}
        >
           {this.props.children}
        </JokesContext.Provider>