使用 Typescript 设置 Context Api 和 useReducer 时出现“没有重载匹配此调用”错误答案

【问题标题】："No overload matches this call" error when setting up ContextApi & useReducer using Typescript使用 Typescript 设置 Context Api 和 useReducer 时出现“没有重载匹配此调用”错误
【发布时间】：2020-08-24 22:02:57
【问题描述】：

我尝试使用打字稿设置 ContextApi 和 useReducer。在 useReducer 中的“issuesInitialState”变量中，出现错误：

没有重载匹配这个调用。重载 1 of 5, '(reducer: ({ state, action }: IssueReducer) => {}, initializerArg: never, initializer?: undefined): [never, DispatchWithoutAction]'，给出以下错误。 “IssuesInitialState”类型的参数不能分配给“never”类型的参数。重载 2 of 5, '(reducer: ({ state, action }: IssueReducer) => {}, initialState: never, initializer?: undefined): [never, Dispatch]'，给出以下错误。 'IssuesInitialState' 类型的参数不可分配给'never'.ts(2769) 类型的参数

// Store.tsx
type Issue = {
  closeDate: string | null;
  description: string;
  issueId: number;
  lastEditDate: string | null;
  priorityId: string;
  projectId: number;
  reportDate: string;
  statusId: string;
  title: string;
  userId: number;
};

interface IssuesInitialState {
  issues: Issue[];
  issue: Issue;
  issuesByProject: Issue[];
  updateIssue: Issue;
}

const issuesInitialState: IssuesInitialState = {
  issues: [],
  issue: {
    closeDate: "",
    description: "",
    issueId: 0,
    lastEditDate: "",
    priorityId: "",
    projectId: 0,
    reportDate: "",
    statusId: "",
    title: "",
    userId: 0,
  },
  issuesByProject: [],
  updateIssue: {
    closeDate: "",
    description: "",
    issueId: 0,
    lastEditDate: "",
    priorityId: "",
    projectId: 0,
    reportDate: "",
    statusId: "",
    title: "",
    userId: 0,
  },
};

export const IssuesContext = createContext<{
  issuesState: IssuesInitialState;
  issuesDispatch: any;
}>({ issuesState: issuesInitialState, issuesDispatch: () => null });

export function StoreProvider({ children }: any): JSX.Element {
  const [commentsState, commentsDispatch] = useReducer(
    commentsReducer,
    commentsInitialState
  );
  const [issuesState, issuesDispatch] = useReducer(
    issuesReducer,
    issuesInitialState // where the error is!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  );

// IssuesReducer.ts
interface IssueReducer {
  state: IssuesInitialState;
  action: {
    type: string;
    payload: Issue;
  };
}

export const issuesReducer = ({ state, action }: IssueReducer): {} => {
  switch (action.type) {
    case FETCH_ISSUES:

【问题讨论】：

标签： reactjs typescript react-context

【解决方案1】：

Martin Lockett 指出，除了返回类型是空对象之外，您的 reducer 是一个采用单个参数的函数，它是一个具有属性 state 和 action 的对象，而实际上它应该是一个采用 2 个参数的函数，首先一是状态，二是动作。它可能会帮助您像这样键入减速器：

import { Reducer } from 'react'

type IssuesAction = {
  type: string;
  payload: Issue;
}

export const issuesReducer: Reducer<IssuesInitialState, IssuesAction> = (state, action) => {
  switch (action.type) {
...

【讨论】：

【解决方案2】：

您已将减速器返回类型定义为 {}，这与 IssuesInitialState 不兼容，因为该类型的属性不是可选的。将你的reducer返回类型定义为状态类型

【讨论】：