React useState点击后状态更新滞后，首次点击id显示undefined

React的setState（包括useState的更新函数）是异步批量更新的，调用setId(record.ID)后，并不会立即更新id变量的值，所以在同一个函数里紧接着使用id，拿到的还是更新前的旧值（首次点击就是初始的空字符串）。

方案1：直接使用record.ID（推荐） #

既然点击时已经拿到了record对象，完全不需要先把record.ID存到状态里再使用，直接用原始值即可，这是最简洁的解决方式：

const handleApprove = async (record) => {
    setIsLoading(true); // 开始加载状态
    try {
        const data = {
            ASSET_ID: record.ID,
        }
        const {data: response } = await axios.post(
            endPoints.approve,
            data
        );
        if(response["status"] === 100){ // 用全等比较判断状态码
            console.log(response.to_be_approved);
            ViewUnApproved(); // 审批完成后刷新列表
        }
    } catch (error) {
        console.error("审批失败:", error);
    } finally {
        setIsLoading(false); // 无论成功失败都关闭加载状态
    }
}

方案2：通过useEffect监听状态变化 #

如果业务逻辑必须依赖id状态（比如后续有其他组件或逻辑需要用到这个值），可以把异步请求放到监听id的useEffect里：

const [id,setId] = useState("");

// 监听id变化，当id有值时执行审批请求
useEffect(()=>{
    if(!id) return; // 初始空值时不执行
    const approveAsset = async () => {
        setIsLoading(true);
        try {
            const data = {
                ASSET_ID: id,
            }
            const {data: response } = await axios.post(
                endPoints.approve,
                data
            );
            if(response["status"] === 100){
                console.log(response.to_be_approved);
                ViewUnApproved();
            }
        } catch (error) {
            console.error("审批失败:", error);
        } finally {
            setIsLoading(false);
        }
    }
    approveAsset();
},[id])

const handleApprove = (record) => {
    setId(record.ID);
}

1. 初始化列表的useEffect依赖错误：
   原代码中第一个useEffect依赖[setDataSource]，setDataSource是useState返回的稳定函数，不会变化，应该改成空数组[]，确保组件挂载时只调用一次ViewUnApproved：

useEffect(()=>{
    ViewUnApproved();
},[])

2. 审批成功判断的语法错误：
   原代码中if((response["status"] = 100))是赋值操作，会把100赋值给response["status"]，永远为真，应该改成全等比较===：

if(response["status"] === 100)

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