在反应打字稿中，类型“void”不可分配给类型“() => void”

Question

我试图传递道具

<Mycomp
 deleteAcc={handleDelete(accountId)}
/>

到另一个组件。我写的道具就像

interface AccProps {
 deleteAcc: () => void;
}

并调用该函数，例如

deleteAcc()

但我收到以下错误

Type 'void' is not assignable to type '() => void'

不知道我在这里错过了什么。

Answer 1

handleDelete(accountId)当您作为 prop传递时，该函数会立即被调用，并且它的返回值（在本例中为 a void）是作为 prop 传递的值。如果函数必须采用此特定参数，请将其作为回调发送：

<Mycomp deleteAcc={() => handleDelete(accountId)} />

由于handleDelete(accountId)reutrn void，此回调是类型化的() => void，因​​此适合 prop 类型。

如果函数不必接受参数，您可以按名称发送它：

<Mycomp deleteAcc={handleDelete} />

通常一个好主意是在组件中创建一个唯一的包装函数并按名称发送它，例如：

const wrapper = () => {
  handleDelete(accountId);
};

<Mycomp deleteAcc={wrapper} />

Answer 2

很可能是因为函数的返回值类型handleDelete是void，而您传递的返回值是handleDelete。whiledeleteAcc需要一个具有类型的函数() => void。

尝试：

<Mycomp deleteAcc={() => handleDelete(accountId)}/>