优化Fetch异步链式调用与React状态管理：避免常见陷阱

async function addListing() {
    let listing = { /* ... */ }; // 列表数据

    await fetch("http://localhost:8080/api/listing", {
        method: "POST",
        headers: {"Content-type": "application/json"},
        body: JSON.stringify(listing)
    })
    .then(() => {
        // 问题所在：内部的fetch操作没有被返回
        fetch("http://localhost:8080/api/listing")
            .then(res => res.json())
            .then(data => {
                setListingID(data[data.length - 1].id);
            })
            .catch(error => {
                console.error("GET请求失败:", error);
            });
    })
    .then(() => {
        // 此处的console.log很可能会在setListingID之前执行
        console.log("Listing ID (可能未更新): ", listingId, " Seller ID: ", sellerId);
    })
    .catch(error => {
        console.error("POST请求或后续操作失败:", error);
    });
}

async function addListingCorrected() {
    let listing = { /* ... */ };

    await fetch("http://localhost:8080/api/listing", {
        method: "POST",
        headers: {"Content-type": "application/json"},
        body: JSON.stringify(listing)
    })
    .then(() => {
        // 关键改进：返回内部的fetch Promise链
        return fetch("http://localhost:8080/api/listing")
            .then(res => res.json())
            .then(data => {
                setListingID(data[data.length - 1].id);
            })
            .catch(error => {
                console.error("GET请求失败:", error);
                // 错误处理，可能需要重新抛出错误或返回一个rejected Promise
                throw error; 
            });
    })
    .then(() => {
        // 现在，此处的console.log会等待前面的所有异步操作完成
        console.log("Listing ID (已更新): ", listingId, " Seller ID: ", sellerId);
    })
    .catch(error => {
        console.error("操作链中发生错误:", error);
    });
}

async function addListingWithAsyncAwait() {
    let listing = { /* ... */ };

    try {
        // 1. 发起POST请求
        await fetch("http://localhost:8080/api/listing", {
            method: "POST",
            headers: {"Content-type": "application/json"},
            body: JSON.stringify(listing)
        });

        // 2. POST成功后，发起GET请求
        const res = await fetch("http://localhost:8080/api/listing");
        const data = await res.json();

        // 3. 更新状态并使用新ID
        const newListingID = data[data.length - 1].id;
        setListingID(newListingID); // React状态更新

        // 4. 使用最新获取的ID进行后续操作
        console.log("Listing ID: ", newListingID, " Seller ID: ", sellerId);

        // 如果需要，可以在这里调用其他依赖newListingID的函数
        // await connectListingToSeller(newListingID, sellerId);

    } catch (error) {
        // 统一的错误处理
        console.error("操作过程中发生错误:", error);
    }
}

// 错误的示例（假设在setListingID后立即使用listingId）
setListingID(data[data.length - 1].id);
console.log("Listing: ", listingId); // 这里的listingId可能还是旧值

// 正确的示例
const newListingID = data[data.length - 1].id; // 将新值存储在局部变量中
setListingID(newListingID); // 更新React状态
console.log("Listing: ", newListingID); // 使用局部变量的最新值

import React, { useState, useEffect } from 'react';

function MyComponent() {
    const [listingId, setListingID] = useState(null);
    const [sellerId, setSellerID] = useState(3); // 假设sellerId已获取

    useEffect(() => {
        // 当listingId更新且不为null时执行
        if (listingId) {
            console.log("Listing ID (useEffect中已更新): ", listingId, " Seller ID: ", sellerId);
            // 在这里调用依赖于最新listingId的函数
            // connectListingToSeller(listingId, sellerId);
        }
    }, [listingId, sellerId]); // 依赖项数组，当这些值变化时，effect会重新运行

    async function addListingWithAsyncAwait() {
        // ... (同上文的addListingWithAsyncAwait函数体)
        try {
            // ... fetch POST and GET ...
            const data = await res.json();
            const newListingID = data[data.length - 1].id;
            setListingID(newListingID); // 这里触发useEffect
            // 注意：此处不再直接console.log listingId，因为useEffect会处理
        } catch (error) {
            console.error("操作过程中发生错误:", error);
        }
    }

    return (
        <button onClick={addListingWithAsyncAwait}>提交</button>
    );
}