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

Posted 2023-04-14

【中文标题】简单的计数器不适用于 React 上下文

【英文标题】：Simple counter isn't working with React context

【发布时间】：2021-12-26 06:23:56

【问题描述】：

我正在学习 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;

【参考方案1】：

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

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

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

【讨论】：

似乎工作正常，但它在ourNumber 右侧显示红色下划线

这说明了什么？

谢谢它运行良好。我也在实现一个具有相同概念的购物车。如果我有任何问题，可以回复你吗？它将在此处的 cmets 中

如果它是一些简单的东西，我猜这里就可以了。顺便问一下，你能不能也把我的答案标记为已解决？

我会标记的。它说You can accept questions in 1 minute