使用反应钩子在上下文提供者中添加多个状态

Question

我想在我的上下文中添加两个状态。不确定如何传递两个状态的值 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, setCount], [percentage, setPercentage] }>
            {props.children}
        </AppContext.Provider>
    </>
)
}

我的其他组件如下

import React, { useState, 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)
}

Answer 1

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

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

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

或

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

<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, setCount, percentage, setPercentage} = useContext(AppContext)