通过useContext在打字稿中传递状态

问题描述 投票:0回答:1

[我正在尝试使用useContext挂钩将状态和setState传递给子组件,但是当我尝试在提供程序的value参数中传递[state,setState]时遇到了ts错误。我的代码如下:


export interface IProviderProps {
  children?: any;
}

const initialState = {
  state: Object,
  setState: () => {},
};

export const AppContext = createContext(initialState);

export const AppProvider = (props: IProviderProps) => {
  const [state, setState] = useState([{ isMenuOpen: false, isSideOpen: false }]);

  return <AppContext.Provider value={[state, setState]}>{props.children}</AppContext.Provider>;
};

我正在设置的initialState的值变量上出现错误。

index.d.ts(290, 9): The expected type comes from property 'value' which is declared here on type 'IntrinsicAttributes & ProviderProps<{ state: ObjectConstructor; setState: () => void; }>'

如何设置初始状态以允许我传递状态和useState变量?

reactjs typescript react-hooks
1个回答
0
投票

下面是如何使用TypeScripthooks创建React的示例。

请参阅React - Context了解更多信息。

// Dependencies.
import React, {createContext, useState, SetStateAction, Dispatch} from 'react'

// App Context.
interface AppContext {

  // Data.
  menuIsOpen: boolean
  sideIsOpen: boolean

  // Functions.
  setMenuIsOpen: Dispatch<SetStateAction<boolean>>
  setSideIsOpen: Dispatch<SetStateAction<boolean>>

}

// Context.
export const Context = createContext<AppContext>({

  // Data.
  menuIsOpen: false,
  sideIsOpen: false,

  // Functions.
  setMenuIsOpen: open => {},
  setSideIsOpen: open => {}

})

// App Provider
export const AppProvider: React.FC<{}> = props => {

  // State.
  const [menuIsOpen, setMenuIsOpen] = useState(false)
  const [sideIsOpen, setSideIsOpen] = useState(false)

  // Data.
  const data = {menuIsOpen, sideIsOpen}

  // Functions.
  const functions = {setMenuIsOpen, setSideIsOpen}

  // Value.
  const value = {...data, ...functions}

  // ..
  return <Context.Provider value={value}>{props.children}</Context.Provider>

}
© www.soinside.com 2019 - 2024. All rights reserved.