即使数据库已正确更新，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
  )
)

我哪里做错了，如何确保 UI 在每次点击后重新呈现？

Answer 1

数据是新值，不需要使用!data.isComplete。只更新没有 !

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

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

React UI not re-rendering on click even though DB is updated correctly. After second click, UI re-renders

state

reactjs

json-server