如何将函数指定为具有默认值的钩子的可选参数答案

【问题标题】：How to specify a function as an optional parameter to a hook with a default value如何将函数指定为具有默认值的钩子的可选参数
【发布时间】：2021-10-15 23:42:39
【问题描述】：

我正在尝试使用 TypeScript 在 React 应用程序中编写一个自定义挂钩，该挂钩可以采用多个可选的回调函数。但是我收到以下错误：

未捕获的类型错误：无法读取未定义的属性（读取“onUpdate”）。我这样写一个界面：

interface UseMyHookProps {
  onConnect:() => void;
  onUpdate?:() => void;
  onDisconnect?:() => {};
}

然后我的钩子是这样的：

const useMyHook = ({ onConnect = () => {}, onUpdate = () => {}, onDisconnect = () => {} }: UseMyHookProps) => {
  ...
  // call the callback if defined.
  onUpdate();
};

最后我像这样在组件函数中调用钩子：

const MyComponent = () => {
  useMyHook();
  ...
};

我不明白为什么会出现此错误。我说回调是可选的，并提供了一个不执行任何操作的 void 函数的默认参数。

【问题讨论】：

标签： reactjs typescript react-hooks

【解决方案1】：

问题是你只为对象的属性提供默认值，而不是为对象本身提供默认值，如果你调用不带参数的钩子，它仍然可以是undefined。

你可以通过将钩子的参数默认为一个空对象= {}来轻松解决这个问题

  const useMyHook = ({
    onConnect = () => {},
    onUpdate = () => {},
    onDisconnect = () => {},
  }: UseMyHookProps = {}) => { // <<<<
    // call the callback if defined.
    onUpdate();
  };

下面的版本完全一样，但更冗长，你可以看到如果不默认params = {}，params 将是未定义的，下面的对象解构将失败

  const useMyHook = (params: UseMyHookProps = {}) => {
    const {
      onConnect = () => {},
      onUpdate = () => {},
      onDisconnect = () => {},
    } = params

    // call the callback if defined.
    onUpdate();
  };

【讨论】：