React中onClick按钮需点击两次才生效的问题求助

核心问题是你用了全局的taskState状态判断单个任务的状态，而非每个任务自身的实际状态。当页面存在多个任务时，全局状态会和单个任务的真实状态脱节，导致第一次点击时逻辑判断错误，需要第二次点击才能纠正全局状态，进而触发正确的操作。

修改方案 #

1. 移除全局的taskState状态，每个任务的状态应该从自身的task对象中获取（假设task包含status字段）
2. 调整handleTaskToggle逻辑，基于当前任务的真实状态执行对应操作
3. 去掉全局状态更新，通过重新拉取数据保证UI与后端状态一致

修改后的代码 #

切换函数部分

type Status = "Active" | "Completed";

// 移除全局的taskState和setTaskState

const handleTaskToggle = async (e: React.MouseEvent, task: { taskId: number; status: Status }) => {
    e.preventDefault();
    try {
        if (task.status === "Completed") {
            await activeTask(task.taskId);
        } else {
            await completeTask(task.taskId);
        }
        // 重新拉取数据，确保UI同步最新状态
        refetchActiveTasks();
        refetchCompletedTasks();
    } catch (error) {
        console.error("Error updating task:", error);
    }
};

按钮部分

<button 
    type="button" 
    className="hover:scale-125 transition-transform " 
    onClick={(e) => handleTaskToggle(e, task)}> 
    {CheckCircle}
</button>

说明 #

• 确保你的task对象包含status字段，用来表示该任务当前的真实状态（Active/Completed）
• 每次点击都会基于任务自身的状态执行正确的API调用，不会再出现全局状态混乱导致的多次点击问题

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