React useContext 不能使简单的计数器工作答案

【问题标题】：React useContext cannot make simple counter workReact useContext 不能使简单的计数器工作
【发布时间】：2020-09-24 09:13:16
【问题描述】：

我试图做一个简单的例子来说明 useContext 是如何工作的。我从这个沙盒代码开始： https://codesandbox.io/s/react-typescript-usecontext-lama-1v7wd

问题是当我单击按钮时组件Counter 没有更新和重新呈现。

我的索引

import React, { useContext } from 'react'
import { MyContextProvider, MyContext } from './Context'
import { render } from 'react-dom'

const MyCounter = () => {
    const context = useContext(MyContext)
    const { counter } = context
    const { setCounter } = context

    return (
        <div>
            Valeur du compteur : {counter}
            <br />
            <button onClick={() => setCounter(counter - 1)} type="button">
                -1
            </button>
            <button onClick={() => setCounter(counter + 1)} type="button">
                +1
            </button>
            <br />
            <button onClick={() => setCounter(0)} type="button">
                RàZ
            </button>
        </div>
    )
}

const rootElement = document.getElementById('root')
render(
    <MyContextProvider>
        <MyCounter />
    </MyContextProvider>,
    rootElement
)

我的背景：

type MyContextProps = {
    counter: number
    setCounter: Dispatch<SetStateAction<number>>
}

const MyContext = createContext({} as MyContextProps)

const MyContextProvider: React.FunctionComponent = (props) => {
    const [counter, setCounter] = useState<number>(0)

    return (
        <MyContext.Provider
            value={{
                counter: 0,
                setCounter: setCounter,
            }}
        >
            {props.children}
        </MyContext.Provider>
    )
}

export { MyContext, MyContextProvider }

这一定是一些基本的东西，但我就是看不到。

【问题讨论】：

标签： reactjs

【解决方案1】：

只是一个小错误。

在您的上下文中，您已将计数器设置为始终为零。将其更改为counter 状态，您的问题应该得到解决。

const MyContextProvider: React.FunctionComponent = (props) => {
    const [counter, setCounter] = useState<number>(0)

    return (
        <MyContext.Provider
            value={{
                counter: counter, //<-- HERE. 
                setCounter: setCounter,
            }}
        >
            {props.children}
        </MyContext.Provider>
    )
}

作为建议，如果下一个值依赖于前一个值，则在使用 setCounter 函数设置下一个值时，考虑使用函数来获取值的最新状态。

来自useState 的突变函数也可以接受一个回调函数，它提供最新的当前状态，并应基于前一个值返回下一个状态值。如果设置状态是在异步操作中防止过时的关闭，这将特别有用。

(prevValue) => nextValue

 <button onClick={() => setCounter(prevValue => prevValue - 1)} type="button">

和

  <button onClick={() => setCounter(prevValue => prevValue + 1)} type="button">

【讨论】：