Проблемы с областью действия с поставщиком контекста с использованием TypeScript - PullRequest
Новая
       67

Проблемы с областью действия с поставщиком контекста с использованием TypeScript

2 голосов
/ 12 июля 2020

Я работал над поставщиком контекста React и пытался создать в нем функцию для передачи ее компонентам для использования. Однако, когда я пытаюсь написать функцию внутри провайдера, он говорит, что переменная с типом void не может быть передана в значение. Когда я делаю это таким образом, это не вызывает эту ошибку: 

import React, { useState, createContext, useEffect } from "react";

interface IUser {
    user: String;
    doSignup: (
        email: String,
        password: String,
        verifyPassword: String,
        name: String
    ) => void;
}

const doSignup = (
    email: String,
    password: String,
    verifyPassword: String,
    name: String
): void => {
    console.log(email, password, verifyPassword, name);
};

export const UserContext = createContext<IUser>({
    user: "",
    doSignup: doSignup,
});

const UserContextProvider: React.FC = (props) => {
    const [user, setUser] = useState("");

    return (
        <UserContext.Provider value={{ user, doSignup }}>
            {props.children}
        </UserContext.Provider>
    );
};

export default UserContextProvider;

Но при этом также возникают проблемы с областью видимости, потому что для других функций мне понадобится доступ к создаваемому методу setUser автор: useState. Я также не могу использовать ловушку useState за пределами компонента.

Пытаюсь найти лучший способ сделать это, но у меня не получается.

1 Ответ

1 голос
/ 12 июля 2020

Я столкнулся с той же проблемой. У меня это работает: 

interface IUserContext {
  foo: '';
  userData: {};
  updateFoo(foo: string): void;
  updateUserData(userData: Object): void;
}

export const UserFooContext = createContext<IUserContext>({
  foo: '',
  userData: {},
  updateFoo(foo: string) {
    return null;
  },
  updateUserData(userData: Object) {
    return null;
  },
});

Возможно, вы можете использовать эту схему в своем контексте. Надеюсь, это поможет

...