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

Question

我正在尝试使用TypeScript在react应用程序中编写一个自定义钩子，该钩子可以采用几个可选的回调函数。然而，我得到以下错误:

Uncaught TypeError: Cannot read properties of undefined (reading 'onUpdate')。我写了一个这样的接口:

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

然后我的钩子像这样:

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

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

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

我不明白为什么我得到这个错误。我说回调是可选的，并提供一个不做任何事情的void函数的默认参数。

Answer 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();
};