SQL数据库待办列表项目：任务状态更新后页面未同步问题求助

Hey there! Let's tackle this issue step by step—it sounds like your backend is doing its job perfectly (updating the task status to 1 in the database), but your frontend isn't syncing that change to the archive section. Here are the most common fixes to get this working:

1. Re-fetch task data after updating the status #

When you click the "Done" button, you’re sending a request to update the task’s status in the DB—but if you don’t follow that up with a request to get the latest task data, your frontend has no way of knowing the status changed.

For example, if you’re using vanilla JS fetch, your update function should look something like this:

async function markTaskComplete(taskId) {
  // First, update the task status in the database
  await fetch(`/your-api-endpoint/${taskId}`, {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ status: 1 })
  });

  // THEN, fetch the updated list of completed tasks
  const completedTasks = await fetch('/your-api-endpoint?status=1')
    .then(res => res.json());

  // Finally, re-render the archive section with the new data
  renderCompletedTasks(completedTasks);
}

2. Make the archive section re-render on data changes #

Chances are, your archive section only gets rendered once when the page loads. Wrap the archive rendering logic in a reusable function that you can call whenever task data updates.

Here’s a simple example of that function:

function renderCompletedTasks(tasks) {
  const archiveContainer = document.getElementById('archive-section');
  // Clear existing content first to avoid duplicates
  archiveContainer.innerHTML = '';

  // Loop through completed tasks and create DOM elements
  tasks.forEach(task => {
    const taskItem = document.createElement('div');
    taskItem.classList.add('completed-task');
    taskItem.textContent = task.task_name; // Replace with your actual task property
    archiveContainer.appendChild(taskItem);
  });
}

Call this function both on page load and right after you update a task’s status.

3. Remove the task from the "To Do" list #

Don’t forget to clean up the active to-do list too. Add a data-task-id attribute to each to-do item in your HTML, then target and remove it once the task is marked complete:

// After marking the task as complete
const todoTaskElement = document.querySelector(`[data-task-id="${taskId}"]`);
if (todoTaskElement) {
  todoTaskElement.remove();
}

4. Double-check your filtering logic #

Verify that the archive section is only pulling in tasks where status = 1. It’s easy to accidentally use the wrong filter (like status = 0) in your fetch request or rendering function—quickly confirm that in your code.

Quick Debugging Tip #

Open your browser’s DevTools (F12) and check the Network tab when you click "Done":

• Confirm the update request returns a 200 OK status.
• Check that the subsequent fetch for completed tasks includes the task you just marked as done.
• If the data looks correct in the Network tab, the issue is definitely in how you’re rendering that data to the archive section.

Give these steps a try—most likely, the problem is that you’re not re-fetching and re-rendering the archive data after the status update.

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