使用React Context实现类组件计数器，递增后数值不更新如何解决

React 类组件禁止直接修改state属性，必须调用内置的setState()方法触发状态更新，直接为this.state.ourNumber赋值不会触发组件重渲染，因此Context Provider传递的状态不会更新，页面自然无法显示最新的数值。

仅需要修改CounterContext.js中的addOne方法，将直接赋值改为setState更新即可，推荐使用函数式更新写法保证状态计算的准确性：

// 修正后的addOne方法
addOne = ()=> {
  console.log("addOne is reached")
  this.setState(prev => ({
    ourNumber: prev.ourNumber + 1
  }))
}

CounterContext.js #

import React, {Component, createContext} from "react"

export const CounterContext = createContext()

class CounterContextProvider extends Component {

    state = {
        ourNumber: 0
    }

    addOne = ()=> {
        console.log("addOne is reached")
        this.setState(prev => ({
          ourNumber: prev.ourNumber + 1
        }))
    }

    render() {
        return (
            <CounterContext.Provider value={{...this.state, addOne: this.addOne}}>
                {this.props.children}
            </CounterContext.Provider>
        )
    }
}

export default CounterContextProvider;

App.js #

（该文件无修改，保持原有代码即可）

import React, {Component} from 'react';
import CounterContextProvider from "./CounterContext";
import CounterPage from "./CounterPage";

class App extends Component {
    render() {
        return (
            <CounterContextProvider>
              <CounterPage/>
            </CounterContextProvider>
        );
    }
}

export default App;

CounterPage.js #

（该文件无修改，保持原有代码即可）

import React, {Component} from 'react';
import {CounterContext} from "./CounterContext";

class CounterPage extends Component {
    render() {
        return (
            <CounterContext.Consumer>
                {counterContext=>{
                    const {ourNumber, addOne} =counterContext

                    return(
                        <>
                            <h1> { ourNumber } </h1>
                            <p> { ourNumber } </p>
                            <button onClick={()=>{addOne()}}>+1</button>
                        </>
                    )
                }}
            </CounterContext.Consumer>
        );
    }
}

export default CounterPage;

内容的提问来源于stack exchange，提问作者asem shaat