TSX中如何一键触发两个事件？数据传输后页面无法刷新

你现在的写法存在两个核心问题：

• 直接在JSX里写{window.location.reload()}会导致组件渲染时就执行页面刷新，根本等不到点击按钮的操作。
• 就算把两个函数简单放在一起，若transfer是异步操作（比如接口请求），页面会直接刷新，完全不等数据传输完成。

正确实现方式 #

你需要把两个逻辑封装到一个函数里，根据transfer是否为异步操作，分两种情况处理：

情况1：transfer是同步函数

直接在包装函数里顺序调用两个方法即可：

{!localError ? (
    <div className="create">
        <Button
            variant=""
            color=""
            disabled={title === ""}
            onClick={() => {
                transfer();
                window.location.reload();
            }}
        >
            Create and transfer
        </Button>
    </div>
) : null}

情况2：transfer是异步函数（比如包含API请求）

必须等待transfer执行完成（比如请求成功）后再刷新页面，用async/await处理异步逻辑：

{!localError ? (
    <div className="create">
        <Button
            variant=""
            color=""
            disabled={title === ""}
            onClick={async () => {
                try {
                    await transfer(); // 等待数据传输完成
                    window.location.reload();
                } catch (err) {
                    // 处理传输失败的情况，比如提示错误，不刷新页面
                    console.error("Transfer failed:", err);
                }
            }}
        >
            Create and transfer
        </Button>
    </div>
) : null}

关键提醒 #

• 绝对不要在JSX属性里直接执行函数（比如{window.location.reload()}），这会在组件渲染阶段立即触发，而非点击按钮时。
• 异步操作一定要加await，确保数据传输完成后再刷新页面，否则会出现数据未同步就刷新的问题。

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