TypeScript 和 createContext - 类型缺少属性

Question

对 TypeScript 相当陌生，并试图掌握数据值和类型的窍门。

import React, { useState, createContext } from 'react'

const defaultValues = {
    id: undefined
}

type AuthenticatedUser = typeof defaultValues

export const UserContext = createContext<AuthenticatedUser>(defaultValues)
export const UserProvider = (props: { children?: React.ReactChild }) => {
    const [authenticatedUser, setAuthenticatedUser] = useState<AuthenticatedUser>(defaultValues)
    const { children } = props

    return (
        <UserContext.Provider value={[authenticatedUser, setAuthenticatedUser]}>
            {children}
        </UserContext.Provider>
    )
}

这给了我以下错误

类型 '({ id: undefined; } | Dispatch<SetStateAction<{ id: undefined; }>>)[]' 中缺少属性 'id' 但在类型 '{ id: undefined; 中是必需的。 }'.ts(2741)

我尝试了各种组合

Answer 1

在UserContext.Provider ，该value需要 { id: undefined } 的类型，但您当前正在将该value分配给类型为({ id: undefined; } | Dispatch<SetStateAction<{ id: undefined; }>>)[] 。

在这里，我们为提供者提供了一个类型为({ id: undefined; } | Dispatch<SetStateAction<{ id: undefined; }>>)[]的数组，而不是预期的{ id: undefined }

<UserContext.Provider value={[authenticatedUser, setAuthenticatedUser]}>
  {children}
</UserContext.Provider>;

如果我们只为Provider提供value={authenticatedUser} ，我们可以看到错误消失了。

 <UserContext.Provider value={authenticatedUser}>
      {children}
 </UserContext.Provider>;

据我所知，我认为您希望能够从应用程序的任何位置更改用户。 您需要在 UserProvider 上设置一个功能，允许您登录、注销等。

export const UserProvider = (props: { children?: React.ReactChild }) => {
  const [authenticatedUser, setAuthenticatedUser] = useState(defaultValues);
  const { children } = props;

  const login = () => {};
  const logout = () => {};
  const register = () => {};

  return (
    <UserContext.Provider value={authenticatedUser}>
      {children}
    </UserContext.Provider>
  );
};

07/07/2021 更新

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

type User = {
  id: number | undefined;
};

type UserContextType = {
  user?: User;
  login: () => void;
  logout: () => void;
};

export const UserContext = createContext<UserContextType>(
  {} as UserContextType
);

export const UserProvider = (props: { children?: React.ReactChild }) => {
  const [user, setUser] = useState<User>();
  const { children } = props;

  const login = () => {};
  const logout = () => {};

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

Answer 2

问题说明

您创建了类型为AuthenticatedUser UserContext ，但是您在value={[authenticatedUser, setAuthenticatedUser]}中传入了一个数组（ value={[authenticatedUser, setAuthenticatedUser]} ）。

使固定

改变这个：

<UserContext.Provider value={[authenticatedUser, setAuthenticatedUser]}>

对此：

<UserContext.Provider value={authenticatedUser}>

如果您想通过上下文访问 setter，则必须将UserContext的类型更改为如下所示：

// Note: defaultValues will be invalid here.
export const UserContext = createContext<[AuthenticatedUser, React.Dispatch<React.SetStateAction<AuthenticatedUser>>]>(defaultValues);

游乐场。