useState Typescript 错误：“prev”类型的参数不可分配给类型参数

Question

实现该代码时

export const resetErrors = (setErrors: (errors: Array<ErrorInterface>) => void, field: string): void => setErrors((prev: Array<ErrorInterface>): void => prev.filter((el: ErrorInterface) => el.field !== field));

出现以下错误： '(prev: Array) => void' 类型的参数不可分配给 'ErrorInterface[]'.ts(2345) 类型的参数问题出在哪里？

Answer 1

让我们将单行代码重写为如下所示：

function resetErrors(setErrors: (errors: Array<ErrorInterface>) => void, field: string): void {

  function filterByField(prev: Array<ErrorInterface>): void {
    function removeFieldFilter(el: ErrorInterface) {
      return el.field !== field;
    }
    return prev.filter(removeFieldFilter); // <- Error: Type 'ErrorInterface[]' is not assignable to type 'void'.ts(2322)
  }

  return setErrors(filterByField); // <- Error: Argument of type '(prev: ErrorInterface[]) => void' is not assignable to parameter of type 'ErrorInterface[]'.ts(2345)
}

export {
  resetErrors,
}

这样更容易发现代码中的一些错误。

1. filterByField被声明为返回void但它返回prev.filter(sameFieldFilter) ，一个ErrorInterface数组；
2. setErrors被声明为带有一个参数的 function 数组ErrorInterface ，但它是用 function 来调用的；

要解决这些问题：

1. 应该删除void以便编译器隐式推断它；
2. resetErrors缺少prev参数；

这将是以下内容：

function resetErrors(prev: Array<ErrorInterface>, setErrors: (errors: Array<ErrorInterface>) => void, field: string): void {

  function filterByField(prev: Array<ErrorInterface>) {
    function removeFieldFilter(el: ErrorInterface) {
      return el.field !== field;
    }
    return prev.filter(removeFieldFilter);
  }

  return setErrors(filterByField(prev));
}

export {
  resetErrors,
}

单行固定版本：

export const resetErrors = (prev: Array<ErrorInterface>, setErrors: (errors: Array<ErrorInterface>) => void, field: string): void => setErrors(prev.filter((el: ErrorInterface) => el.field !== field));