在我看来,直接使用异步函数作为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>