在带有响应钩子的上下文提供程序中添加多个状态

问题描述

我想在上下文中添加两个状态。不确定如何传递两个状态value={ [count,setCount],[percentage,setPercentage] }的值是否正确？并且还注意到只有百分比状态在起作用，由于某种原因，它会覆盖我的计数状态。任何帮助都将非常感谢。我的下面的代码

import React,{ useState,createContext } from 'react'
export const AppContext = createContext()

export const CounterProvider = props => {

const [count,setCount] = useState(1)
const [percentage,setPercentage] = useState(20)

return (
    <>
        <AppContext.Provider value={ [count,setPercentage] }>
            {props.children}
        </AppContext.Provider>
    </>
)
}

我的其他组件如下

import React,useContext,useEffect } from 'react'
import { AppContext } from './AppContext'

const StepOne = () => {

const [percentage,setPercentage] = useContext(AppContext)
const percentageIncrement = () => {
    setPercentage(percentage + 80)
}

const [count,setCount] = useContext(AppContext)
const countIncrement = () => {
    setCount(count + 1)
}

解决方法

您在此处有2个选项，上下文的值可以是数组或对象。我看到您正在尝试使用array选项，并且要正确完成，看起来像这样

<AppContext.Provider value={[ [count,setCount],[percentage,setPercentage] ]}>
  {props.children}
</AppContext.Provider>

const [[count,setPercentage]] = useContext(AppContext)

OR

更常见的方法是使对象具有有意义的键

<AppContext.Provider value={{ count,setCount,percentage,setPercentage }}>
  {props.children}
</AppContext.Provider>

// this is equal to

<AppContext.Provider value={{ count: count,setCount: setCount,percentage: percentage,setPercentage: setPercentage }}>
  {props.children}
</AppContext.Provider>

const {count,setPercentage} = useContext(AppContext)