为何我的PATCH请求需提交两次才生效？

你的代码存在React异步状态更新的典型问题：调用setOpen后立刻使用open变量构造请求体，但setOpen是异步执行的，此时open仍然是更新前的旧值。第一次请求发送的是原状态，数据库自然不会有变化；第二次点击时，open已完成更新，请求体才是正确的新状态，数据库才会执行更新。

先计算出新的状态值，再用这个值同时更新state和构造请求体：

const handleStatusChange = async () => {
    // 先计算新状态，避免依赖异步更新后的state
    const newOpen = !open;
    setOpen(newOpen);

    const ticket = {open: newOpen};

    const response = await fetch(`/api/tickets/${previewTicket._id}`, {
        method: "PATCH",
        body: JSON.stringify(ticket),
        headers: {
            "Content-Type": "application/json"
        }
    });
    const json = await response.json();

    if (!response.ok){
        console.log(json.error);
        // 请求失败时回滚状态，保证本地与数据库状态一致
        setOpen(open);
    }
    if (response.ok){
        console.log("status has been changed", json);
    }
};

• 添加请求失败的状态回滚逻辑：如果PATCH请求失败，将open恢复为原状态，避免本地状态与数据库状态脱节。
• 增加加载状态控制：比如在请求过程中禁用操作按钮，防止用户重复触发请求。

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