如何输入作为 prop 传递给 React 组件的异步函数

Question

我应该如何输入作为属性传递给 React 组件的异步函数？

我的组件定义如下。具体来说，我不知道如何在界面中键入addTask属性：

interface INewTaskEntryProps {
    addTask:any; // this 
}
class NewTaskEntry extends React.Component<INewTaskEntryProps> {
    ...
    render() { 
        return (
            ...
            <button onClick={(e) => this.props.addTask(e)}>Do Something</button>
            ...
        );
    }
}

我的异步函数定义如下：

const addTask = async (e) => {
    ...
    try {
        const newID = await mongoTaskCollection.insertOne({
            ...
        });
    }
    ...
}

最后，我将异步函数传递到我的组件中，如下所示：

<NewTaskEntry addTask={addTask} />

Answer 1

取决于 addTask 返回的内容，但可能是这样的：

interface INewTaskEntryProps {
  addTask: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => Promise<void>; 
}

在这种情况下，您告诉addTask返回一个解决空值的承诺。如果您的 fn 返回 mongo 文档并且您已输入它，您可以添加它（如Promise<Task>）而不是作为void返回值。