React Context - 上下文和子渲染没有更新答案

【问题标题】：React Context - Context and Child render are not updatingReact Context - 上下文和子渲染没有更新
【发布时间】：2020-05-23 13:23:23
【问题描述】：

当我按下子组件上的按钮时，我正在使用REACT context 尝试将登录从子组件更新到应用组件。

完整代码here.

所以有两个组件：App 和 Child 在同一个文件中。

这是我的 UserContext 与 login 变量和更新登录的功能（使用 loginUpdated）

const UserContext = React.createContext({
    login: 'defaultLogin',
    updateLogin: (loginUpdated) => {}
});

在 App 组件中，我的 UserContext.Provider 围绕着 Child 组件：

class App extends React.Component {
    constructor(props) {
        super(props);

        this.appLoginUpdate = this.appLoginUpdate.bind(this); 

        this.state = {
            login: "AppLoginValue"
        }
    }

    appLoginUpdate(login) {
        console.log("1. appLoginUpdate method => login value: ", login)

        this.setState({
            login: login
        })

        console.log("2. appLoginUpdateLogin method after state update :", this.state.login)
    }

    render() {
        const contextValue = {
            login: "contextValueLogin",
            updateLogin: this.appLoginUpdate
        }
        return (
            <UserContext.Provider value={contextValue}>
                <Child />
            </UserContext.Provider>
        );
    }
}

最后我得到了 Child 组件

class Child extends React.Component {
    constructor(props) {
        super(props);

        this.handleClick = this.handleClick.bind(this);
    }

    static contextType = UserContext;

    handleClick() {
        this.context.updateLogin("ChildValueLogin")
    }

    render() {
        console.log("3. Context login value : ", this.context.login)
        return (
            <div>
                <h1>{this.context.login}</h1>
                <button onClick={this.handleClick}>UPDATE LOGIN</button>
            </div>
        )
    }
}

在点击“更新登录”按钮之前，我已经在控制台中找到了这个：

3. Context login value :  contextValueLogin

[没关系，这是App中给contextValue.login的值]

当第一次点击“更新登录”按钮时，我在控制台中得到了这个：

1. appLoginUpdate method => login value:  ChildValueLogin

[没关系，登录参数的预期值]

2. appLoginUpdateLogin method after state update : AppLoginValue

[ 不好，this.state 还没有更新]

3. Context login value :  contextValueLogin

[这也太糟糕了]

当我再次点击时：

1. appLoginUpdate method => login value:  ChildValueLogin

[再次确定]

2. appLoginUpdateLogin method after state update : ChildValueLogin

[现在第二次点击就OK了？！ ]

3. Context login value :  contextValueLogin

[又坏了，从未更新]

我希望您能帮我找出这段代码中的问题。谢谢你的帮助。

【问题讨论】：

标签： reactjs react-context

【解决方案1】：

setState 异步更新状态。将 setState 函数更改为

this.setState({
      login: login
}, () => {
      console.log(
        "2. appLoginUpdateLogin method after state update :", this.state.login
     );
});

查看更改的状态。

setState 函数接受一个可选的回调函数参数，该参数在状态更新后调用。如果你想在更新后立即看到状态的变化，你需要把你的console.log语句放在这个回调函数里面

你也需要改变

const contextValue = {
    login: "contextValueLogin",           <----- hard-coded string
    updateLogin: this.appLoginUpdate
};

到

const contextValue = {
  login: this.state.login,
  updateLogin: this.appLoginUpdate
};

记录this.context.login的更新值

进行上述更改后，控制台上的输出将是：

更新按钮点击前

3. Context login value :  AppLoginValue

点击更新按钮后

1. appLoginUpdate method => login value:  ChildValueLogin 
3. Context login value :  ChildValueLogin 
2. appLoginUpdateLogin method after state update : ChildValueLogin

【讨论】：