onClick首次触发时then回调内的fetch无法正常工作问题

1. 异步流程未正确等待：第一个.then()中的GET请求没有返回Promise，导致后续的.then()会在GET请求完成前执行，此时setListingID还未完成状态更新，所以打印的是初始空值。
2. React状态更新异步特性：即使GET请求完成并调用了setListingID，React的状态更新是异步操作，无法在紧接着的同步代码中拿到最新的listingId值。第二次点击能拿到值，是因为此时listingId已经是上一次提交后更新的状态。

1. 统一使用async/await梳理异步流程 #

避免混用async/await和.then()，让代码逻辑更清晰，同时确保每一步异步操作都等待完成：

async function addListing() {
  try {
    const listing: any = {
      make: make,
      model: model,
      year: year,
      mileage: mileage,
      price: price
    };

    // 等待POST请求完成
    await fetch("http://localhost:8080/api/listing", {
      method: "POST", 
      headers: {"Content-type": "application/json"},
      body: JSON.stringify(listing)
    });

    // 执行GET请求并等待响应解析
    const res = await fetch("http://localhost:8080/api/listing");
    const data = await res.json();
    const newListingId = data[data.length - 1].id;
    
    // 更新状态（用于UI展示）
    setListingID(newListingId);

    // 直接使用刚获取的newListingId执行后续操作
    console.log("Listing: ", newListingId, " Seller: ", sellerId);
    // 调用关联函数，传入新的listingId和sellerId
    await associateListingWithSeller(newListingId, sellerId);
  } catch (error) {
    console.error("提交失败:", error);
  }
}

2. 优化建议（可选但推荐） #

当前通过GET所有列表取最后一个id的方式存在并发风险（如果有其他用户同时提交，可能拿到错误的id），建议修改后端POST接口，在创建成功后直接返回新生成的listingId：

// 修改后的POST请求处理
const postRes = await fetch("http://localhost:8080/api/listing", {
  method: "POST", 
  headers: {"Content-type": "application/json"},
  body: JSON.stringify(listing)
});
const newListing = await postRes.json();
const newListingId = newListing.id;
setListingID(newListingId);

// 后续操作直接用newListingId

这样既减少了一次HTTP请求，又避免了并发场景下的id获取错误。

内容的提问来源于stack exchange，提问作者Jovan M.