异步调用后，React Context API不会更新状态

Question

我一直按照this example编写自己的代码，但是单击按钮后异步获取调用后状态不会更新。

这是一个真正简单的应用程序，当用户加载页面时，它还会加载componentDidMount()中的状态。当用户单击获取“笑话” 按钮时，它将使用新的“笑话”再次设置状态。

页面加载后，笑话会在几毫秒后得到很好的呈现。但是，单击按钮时，它仅在控制台中显示获取的“笑话”，但状态为null。

单击按钮后，我登录了this对象，看起来像这样吗？

这是代码，应用正在“运行”：https://codesandbox.io/s/friendly-shirley-qupr4

我感谢任何评论。

Answer 1

所以您忘记了绑定操作。 在JokeStat.js中 在

中绑定动作

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

或更改

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

到

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

或第三个选项

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