可以在按钮反应中的onClick中调用异步函数吗

Question

我将在按钮中的 onclick 事件中调用异步函数。但它不起作用。是否可以在按钮 onlick 中调用异步函数？

这是代码。

过滤器按钮

const FilterButton = (props) => {

return (
    <div className="p-2 ">
        <button className="btn btn-secondary" onClick={props.fetchInvoices}>Filter</button>
    </div>
 );
};

fetchInvoices 异步函数

fetchInvoices = async () => {
    const invoices = await getInvoices(this.currentState.params);
    this.props.store.dispatch(UpdateInvoices(invoices));
};

将函数传递给组件的代码

 <SearchField store = {this.props.store} fetchInvoices={this.fetchInvoices}/>

原文由 Pubudu Jayasanka 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这就是我在 onClick 中调用异步的方式：

 <Button onClick={async () => {await this.asyncFunc("Example");} }/>

async asyncFunc(text) {
    console.log(text);
}

原文由 Moritz Schmidt 发布，翻译遵循 CC BY-SA 4.0 许可协议