打字稿错误无法调用可能 'undefined' 的对象

Question

你好，我是 typescript react 的新手，目前正在尝试使用 typescript 和 youtube 上的教程制作应用程序。

const RegisterCustomer: React.FC = () => {
    const [text, setText] = useState<string>('');

    const [email, setEmail] = useState<string>('');
    const [username, setUsername] = useState<string>('');
    const [password, setPassword] = useState<string>('');
    const [isSubmitting, setIsSubmitting] = useState(false);
    const { register } = useAuth();
    

  return (
   <IonPage>
        <Register />
        <IonContent className="body">
        <IonGrid className="gridinput1">
        </IonGrid>

        <IonGrid className="gridinput2">
        <IonRow>
            <IonInput type="email" className="inputEmail" value={email} placeholder="Email" onIonChange={e => setEmail(e.detail.value!)}></IonInput>
        </IonRow>
        </IonGrid>
        <IonGrid className="gridinput3">
        <IonRow>
            <IonInput type="password" className="inputEmail" value={password} placeholder="Password" onIonChange={e => setPassword(e.detail.value!)}></IonInput>
        </IonRow>
        </IonGrid>
        <IonGrid className="gridinput1">
        <IonRow>
            <IonButton onClick={async e =>{
                e.preventDefault()
                const res = await register(email, password);
                if(res) {
                    console.log(res);
                }
                else {
                    //handle null response
                }
                console.log(email, password)
            }} className="buttonLogin" expand="block" size="default" color="new">
                Register Now
            </IonButton>
        </IonRow>
        </IonGrid>   
            <p className="loginSeller"><a href="https://www.w3schools.com/">Are you a seller? Login as Seller</a></p>
    </IonContent>
    </IonPage>
  );
};

export default RegisterCustomer;

这是 authContext

type ButtonProps = {
    children: ReactNode;
    
}

export const useAuth = () =>useContext(AuthContext);

type AuthContextType = {
    currentUser: null;
    register: (
      email: string,
      password: string
    ) => Promise<UserCredential | undefined>;
  };

const AuthContext = createContext<Partial<AuthContextType>>({}); // Partial

export default function AuthContextProvider( { children}  : ButtonProps){
    const [currentUser, setCurrentUser] = useState(null);

    function register(email: string, password:string) {
        return createUserWithEmailAndPassword(auth, email, password)
    }
    
    const value = {
        currentUser,
        register,
    }
    
    return <AuthContext.Provider value={value}>
        {children}
    </AuthContext.Provider>
}

我试图将数据从寄存器获取到 firebase，但我在 RegisterCustomer 页面的 register.then 中遇到错误“无法调用可能是 'undefined' 的对象。”我该如何解决这个问题

Answer 1

由于您希望 register 属性始终存在，请调整您的类型，使其保持为必需属性:

const AuthContext = createContext<Partial<Omit<AuthContextType, "register">> & Pick<AuthContextType, "register">>({});

在这里，类型被分成两部分。 Partial<Omit<AuthContextType, "register">> 创建一个类型删除 register 属性并将其他所有内容标记为可选。 Pick<AuthContextType, "register"> 创建的类型只有具有 register 属性。我们使用交集 (&) 将它们组合在一起以获得最终类型，这使得所有内容除了 register 都是可选的。

这将产生一个额外的错误，因为您将 {} 作为默认值传递，但类型表明 register 属性必须出现在该上下文中。由于它只是默认值并且您在使用提供程序时会覆盖它，因此我建议将 no-op 函数作为默认值 register 传递给它。例如：

const AuthContext = createContext<Partial<Omit<AuthContextType, "register">> & Pick<AuthContextType, "register">>({register: async () => undefined});

打字稿错误无法调用可能 'undefined' 的对象

typescript error Cannot invoke an object which is possibly 'undefined'

firebase

typescript

reactjs