【问题标题】：TypeScript and createContext - Property is missing on typeTypeScript 和 createContext - 类型上缺少属性
【发布时间】：2021-07-07 21:22:24
【问题描述】：

对 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>)[]' 中缺少属性 'id' 但类型 '{ id: undefined; }'.ts(2741)

各种组合我都试过了

【问题讨论】：

标签： reactjs typescript react-hooks

【解决方案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>
  );
};

【讨论】：

感谢您的解释，我将如何访问这些功能来更改用户？我无法导出函数本身
您需要更改提供程序的类型以接受以下类型的对象：{id: undefined, login: () => void ... 等，以便在您的上下文中返回它。然后，当您使用上下文（用户上下文）时，您可以访问这些功能。
我可以在某个地方读到这个吗？我没有让它工作。如何在我的上下文中返回函数？

【解决方案2】：

问题说明

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

修复

改变这个：

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

到这里：

<UserContext.Provider value={authenticatedUser}>

如果您想通过上下文访问设置器，则必须将 UserContext 的类型更改为以下内容：

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

Playground.

【讨论】：