如何鍵入異步 function 作為道具傳遞給 React 組件

Question

我應該如何鍵入作為屬性傳遞給我的 React 組件的異步 function？

我的組件定義如下。 具體來說，我不知道如何在我的界面中鍵入addTask屬性：

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

我的異步 function 定義如下：

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

最后，我將異步 function 傳遞到我的組件中，如下所示：

<NewTaskEntry addTask={addTask} />

Answer 1

取決於 addTask 返回的內容，但可能是這樣的：

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

在這種情況下，您告訴addTask返回 void。