在打字稿中反应 createContext 问题? [英] React createContext issue in Typescript?

问题描述

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

So I'm having a very weird issue with React Context + Typescript.

工作示例

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

In the above example, you can see what I'm trying to do actually work. Essentially I'm managing state with the new useContext method, and it works perfectly.

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

However, when I try to do this on my box, it cannot seem to find the state values being passed through the 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

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

Keep in mind the code I'm using is exactly what I'm using on my box, I've even downloaded the code from sandbox and tried running it, and it doesn't work.

我使用的是 VSCode 1.31

I'm using VSCode 1.31

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

I've managed to deduce that if I change how I create my context from:

export const AdminStore = React.createContext(initialState);

到

export const AdminStore = React.createContext(null);

value 属性不再抛出该错误.

The value property no longer throws that error.

然而，现在 useContext 返回一个错误:状态不存在于 null.同样，如果我将上下文的 defaultState 设置为 {}.

However, now useContext returns an error: state doesn't exist on null. And same if I set defaultState for context to {}.

当然如果我

React.createContext();  

然后 TS 大喊没有提供 defaultValue.

Then TS yells about no defaultValue being provided.

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

提前感谢您的建议.

推荐答案

defaultValue 值rel="noreferrer">React.createContext 应该是以下类型:

It appears defaultValue value for React.createContext is expected to be of type:

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

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

Once Context object is created for this type, for example like this:

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

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

Provider React component should no longer complain about the error.

这是更改列表:

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>
  );
}

这篇关于在打字稿中反应 createContext 问题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！