在打字稿中使用带有反应钩子的反应上下文 [英] Using react context with react hooks in typescript

问题描述

下面的代码演示了我如何尝试使用反应钩子实现反应的上下文，这里的想法是我将能够像这样轻松地从任何子组件访问上下文

Code below demonstrates how I'm trying to implement react's context with react hooks, idea here is that I will be able to easily access context from any child component like this

const {authState, authActions} = useContext(AuthCtx);

首先，我创建了一个导出上下文和提供程序的文件.

To begin with I create a file that exports context and provider.

import * as React from 'react';

const { createContext, useState } = React;

const initialState = {
  email: '',
  password: ''
};

const AuthCtx = createContext(initialState);

export function AuthProvider({ children }) {
  function setEmail(email: string) {
    setState({...state, email});
  }

  function setPassword(password: string) {
    setState({...state, password}); 
  }

  const [state, setState] = useState(initialState);
  const actions = {
    setEmail,
    setPassword
  };

  return (
    <AuthCtx.Provider value={{ authState: state, authActions: actions }}>
      {children}
    </AuthCtx.Provider>
  );
}

export default AuthCtx;

这有效，但我在提供程序的 value 中出现以下错误，可能是因为我添加了操作，因此问题是，有没有办法让我保持输入的所有内容并且仍然能够导出上下文和提供者?

This works, but I get error below in value of provider, probably because I add actions in, hence the question, is there a way for me to keep everything typed and still be able to export context and provider?

我相信我也不能将 createContext 放入我的主函数中，因为它会一直重新创建它?

I beliebe I also can't place createContext into my main function since it will re-create it all the time?

[ts] 输入 '{ authState: { email: string;密码:字符串；};authActions: { setEmail: (email: string) => void;设置密码:(密码:字符串)=> 无效；};}' 不能分配到类型 '{ 电子邮件:细绳;密码:字符串；}'.对象字面量只能指定已知属性，并且 'authState' 不存在于类型 '{ email: string;密码:字符串；}'.[2322] index.d.ts(266, 9):预期类型来自在类型上声明的属性value"'内在属性 &ProviderProps<{ 电子邮件:字符串；密码:细绳;}>'(属性)authState:{电子邮件:字符串；密码:字符串；}

[ts] Type '{ authState: { email: string; password: string; }; authActions: { setEmail: (email: string) => void; setPassword: (password: string) => void; }; }' is not assignable to type '{ email: string; password: string; }'. Object literal may only specify known properties, and 'authState' does not exist in type '{ email: string; password: string; }'. [2322] index.d.ts(266, 9): The expected type comes from property 'value' which is declared here on type 'IntrinsicAttributes & ProviderProps<{ email: string; password: string; }>' (property) authState: { email: string; password: string; }

推荐答案

在创建上下文时，您为其提供了一个初始值.以与您期望的提供者相同的格式提供它，例如:

While creating Context, you are providing an initial value to it. Provide it in the same format as you expect it to be for the Provider like:

const initialState = {
  authState : { 
      email: '',
      password: ''
  },
  authActions = {
    setEmail: () => {},
    setPassword: () => {}
  };
};

const AuthCtx = createContext(initialState);

此外，您甚至不需要 initialState，因为它只传递给 Consumer，如果您在 Consumer 的层次结构中没有更高的 Provider.

Also, you don't even need the initialState since its only passed to Consumer, if you don't have a Provider higher up in the hierarchy for the Consumer.

这篇关于在打字稿中使用带有反应钩子的反应上下文的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！