javascript - React Context API 在异步调用后不更新状态

Question

我正在关注this example对于我自己的代码，但在单击按钮时进行异步获取调用后状态不会更新。

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

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

单击按钮时，我记录了 this 对象，它看起来像这样，正确吗？

这是代码和应用程​​序“正在运行”:https://codesandbox.io/s/friendly-shirley-qupr4

感谢任何评论。

Answer 1

所以你忘记了绑定(bind)操作。在 JokeStat.js 中绑定(bind) Action 在

        <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>