React+TypeScript中按钮onClick用异步匿名箭头函数是否为不良实践？

你的代码里确实存在几处不良实践，具体分析如下：

1. onClick事件处理中的冗余await与未捕获异常 #

按钮的onClick回调写了async () => await addUser(user)，这里的await完全冗余——addUser本身已经返回Promise，不需要在箭头函数里额外await它。更关键的是，这个async函数如果抛出异常（比如请求失败），会产生未捕获的Promise rejection，生产环境可能导致应用崩溃，且无法直观看到错误原因。

2. 混合使用await与.then()链式调用 #

addUser函数里同时用了await fetch(...)和.then()，这种混合写法会让逻辑变得混乱，可读性大幅下降。async/await的设计初衷就是替代Promise链式调用，让异步代码更接近同步代码的写法，混用就失去了它的意义。

3. 缺失错误处理逻辑 #

你的fetch请求既没处理网络错误（比如断网时的请求失败），也没处理HTTP错误状态码（比如4xx、5xx）。默认情况下，fetch只有在网络层面失败时才会抛出异常，HTTP错误码不会触发reject，这会导致请求失败时你完全不知道问题出在哪，只能看到console.log的结果不符合预期。

改进后的代码示例 #

// 按钮点击事件：直接调用addUser，同时捕获异常
<button onClick={() => {
  addUser(user).catch(err => {
    console.error('添加用户失败:', err);
    // 这里可以添加用户友好提示，比如弹出错误弹窗
  });
}}>Submit</button>

async function addUser(user: User): Promise<void> {
  try {
    const resp = await fetch('user', {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        UserId: user.id,
        UserName: user.user_name,
        Email: user.email
      })
    });

    // 主动处理HTTP错误状态码
    if (!resp.ok) {
      throw new Error(`请求失败: ${resp.status} ${resp.statusText}`);
    }

    const res = await resp.json();
    console.log(res);
  } catch (err) {
    console.error('请求出错:', err);
    // 可将错误抛出给调用方处理，或直接在这里完成错误逻辑
    throw err;
  }
}

内容的提问来源于stack exchange，提问作者Synapse explod