在typescript中react createContext 问题？

IT技术 reactjs typescript react-hooks react-context
2021-05-13 08:53:12

所以我在 React Context + Typescript 上遇到了一个非常奇怪的问题。

工作示例

在上面的例子中，你可以看到我正在尝试做的实际工作。本质上，我正在使用新的 useContext 方法管理状态，并且它运行良好。

但是，当我尝试在我的盒子上执行此操作时，它似乎无法找到通过 useReducer 传递的状态值。

export function AdminStoreProvider(props: any) {
const [state, dispatch] = useReducer(reducer, initialState);
// state.isAuth is avail here
// state.user is avail here
const value = { state, dispatch };
// value.state.isAuth is avail here
return (
    /* value does not contain state once applied to the value prop */
    <AdminStore.Provider value={value}>{props.children} 
    </AdminStore.Provider>
   );
}

错误信息：

Type '{ state: { isAuth: boolean; user: string; }; dispatch: 
Dispatch<Actions>; }' is missing the following properties from type 
'IState': isAuth, user

请记住，我正在使用的代码正是我在我的盒子上使用的代码，我什至从沙箱下载了代码并尝试运行它，但它不起作用。

我正在使用 VSCode 1.31

我已经设法推断出，如果我改变我创建上下文的方式：

export const AdminStore = React.createContext(initialState);

到

export const AdminStore = React.createContext(null);

value 属性不再抛出该错误。

但是，现在 useContext 返回一个错误：状态在 null 上不存在。同样，如果我将上下文的 defaultState 设置为 {}。

当然如果我 

React.createContext();

然后 TS 大喊没有提供 defaultValue。

在沙箱中，创建上下文对象的所有 3 个版本都可以正常工作。

提前感谢您的任何建议。

2个回答

它的defaultValue值 似乎React.createContext是以下类型： 

interface IContextProps {
  state: IState;
  dispatch: ({type}:{type:string}) => void;
}

一旦Context为此类型创建了对象，例如像这样：

export const AdminStore = React.createContext({} as IContextProps);

Provider React 组件不应再抱怨错误。

以下是更改列表：

admin-store.tsx

import React, { useReducer } from "react";
import { initialState, IState, reducer } from "./reducer";


interface IContextProps {
  state: IState;
  dispatch: ({type}:{type:string}) => void;
}


export const AdminStore = React.createContext({} as IContextProps);

export function AdminStoreProvider(props: any) {
  const [state, dispatch] = useReducer(reducer, initialState);

  const value = { state, dispatch };
  return (
    <AdminStore.Provider value={value}>{props.children}</AdminStore.Provider>
  );
}

我玩得很开心，所以我想我会分享我的想法。

该SidebarProps表示上下文的状态。除了减速器操作之外，其他所有内容基本上都可以按原样使用。

这是一篇很好的文章，解释了完全相同的解决方法（不在 TypeScript 中）：Mixing Hooks and Context Api

import React, { createContext, Dispatch, Reducer, useContext, useReducer } from 'react';

interface Actions {
    type: string;
    value: any;
}

interface SidebarProps {
    show: boolean;
    content: JSX.Element | null;
}

interface SidebarProviderProps {
    reducer: Reducer<SidebarProps, Actions>;
    initState: SidebarProps;
}

interface InitContextProps {
    state: SidebarProps;
    dispatch: Dispatch<Actions>;
}

export const SidebarContext = createContext({} as InitContextProps);
export const SidebarProvider: React.FC<SidebarProviderProps> = ({ reducer, initState, children }) => {
    const [state, dispatch] = useReducer(reducer, initState);
    const value = { state, dispatch };
    return (
        <SidebarContext.Provider value={value}>
            {children}
        </SidebarContext.Provider>
    );
};
export const useSidebar = () => useContext(SidebarContext);

const SidebarController: React.FC = ({ children }) => {
    const initState: SidebarProps = {
        show: false,
        content: null
    };

    const reducer: Reducer<SidebarProps, Actions> = (state, action) => {
        switch (action.type) {
            case 'setShow':
                return {
                    ...state,
                    show: action.value
                };

            case 'setContent':
                return {
                    ...state,
                    content: action.value
                };

            default:
                return state;
        }
    };

    return (
        <SidebarProvider reducer={reducer} initState={initState}>
            {children}
        </SidebarProvider>
    );
};

export default SidebarController;
其它你可能感兴趣的问题
上一篇带有 Pronterface UI 的 Cura 停止打印 下一篇在 Ultimaker Original+ 上安装 E3D v6 挤出机电子设备