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

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

0 голосов
/ 14 июня 2019

Я следовал этому примеру для своего собственного кода, но состояние не обновляется после асинхронного вызова выборки при нажатии кнопки.

Это действительно простое приложение, когда пользователь загружает страницу, он также загружает состояние в componentDidMount(). Когда пользователь нажимает кнопку Get "шутка" , он снова устанавливает состояние с новой "шуткой".

Когда страница загружается, шутка хорошо отрисовывается через пару миллисекунд. Но при нажатии на кнопку в консоли отображается только выбранная «шутка», а состояние - null.

При нажатии на кнопку я зарегистрировал this объект, и он выглядит так, это правильно?

image

Вот код и приложение "работает": https://codesandbox.io/s/friendly-shirley-qupr4

Я ценю любые комментарии.

1 Ответ

1 голос
/ 14 июня 2019

Итак, вы забыли о обязательном действии. В 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 });
    }

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

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