时间戳

首页 > 解决方案 > 异步调用后 React Context API 不更新状态

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

问题描述

我为自己的代码遵循此示例，但在单击按钮时异步获取调用后状态不会更新。

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

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

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

图片

这是代码和应用程​​序“工作”：https ://codesandbox.io/s/friendly-shirley-qupr4

我感谢任何评论。

标签： javascriptreactjsecmascript-6react-redux

解决方案

所以你忘记了绑定动作。在 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>

推荐阅读