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

Posted 2023-03-27

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

【英文标题】：React UI not re-rendering on click even though DB is updated correctly. After second click, UI re-renders

【发布时间】：2021-11-08 22:42:40

【问题描述】：

我正在一个待办事项列表中调用一个 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
  )
)

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

【参考方案1】：

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

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

【讨论】：

就我而言，我需要将其切换为相反的值，因为我使用相同的按钮来撤消任务的完成。有没有办法可以合并这个？

对不起-这就是答案！谢谢！