在处理按钮的OnClick时,使用异步匿名/箭头功能是不是一种糟糕的做法?

在我看来,直接使用异步函数作为onClick事件的事件处理程序并不一定是糟糕的做法,但它可能会导致意外行为,在某些情况下可能不是最佳方法。。 例如,如果异步函数中发生错误,事件处理程序将无法正确捕捉到该错误,从而让用户对所发生的事情一无所知。 此外,考虑到高可扩展性的应用程序,您可能会遇到可维护性方面的问题。内联使用异步箭头函数会降低代码的可读性,使其更难维护。

更好的方法是:

async function addUser(user: User): Promise<void> {
    try {
        const response = await fetch('user', {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                UserId: user.id,
                UserName: user.user_name,
                Email: user.email
            })
        });
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error adding user:', error);
        // Handle error as needed
    }
}


<button onClick={() => addUser(user)}>Submit</button>