簡單計數器不適用於 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;

應用程序.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