即使 DB 已正确更新，React UI 也不会在单击时重新呈现。第二次点击后，UI 重新渲染

Question

我正在一个待办事项列表中调用一个 completeTask 函数

    </IconButton>
    {task.isComplete ? (
      <Button
        startIcon={<UndoIcon />}
        onClick={() => completeTask(task.id)}
      >
        Mark as not complete
      </Button>
    ) : (
      <Button
        startIcon={<CheckIcon />}
        onClick={() => completeTask(task.id)}
      >
        Complete Task
      </Button>
    )}

但是，当我点击完成时，json 服务器数据库会更新，但 UI 不会更新，直到第二次点击

const completeTask = async (id) => {

const taskToToggle = await fetchTask(id)
const updTask = {...taskToToggle, isComplete: !taskToToggle.isComplete}

const res = await fetch(`http://localhost:8000/tasks/${id}`, {
  method: 'PUT',
  headers: {
    'Content-type' : 'application/json'
  },
  body: JSON.stringify(updTask)
})

const data = await res.json()

setTasks(
  tasks.map((task) =>
    task.id===id ? {...task, isComplete:!data.isComplete} :task
  )
)

我做错了什么，如何确保用户界面在每次点击后重新呈现？

Answer 1

data 是新值，不需要使用!data.isComplete。不用!就更新吧

setTasks(
  tasks.map((task) =>
    task.id===id ? {...task, isComplete:data.isComplete} :task
  )
)