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

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)

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

adding multiple states in context provider with react hooks

reactjs

react-hooks

use-context