简单的计数器不适用于 React 上下文

Question

我正在学习 React 上下文，并尝试通过使用上下文来可视化概念来创建一个简单的计数器。不幸的是，它不能完美地工作。上下文工作正常，但不适用于简单的算术。我的意思是它不起作用是增量后值没有显示。

我正在尝试在不使用功能组件的情况下找到解决方案。

这里附上整个代码，很简单。

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.state.ourNumber = this.state.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;

Answer 1

为了改变类组件中的状态，你应该像这样使用setState()：

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

https://reactjs.org/docs/react-component.html#setstate