React UI点击后不重渲染但数据库更新正常，第二次点击才生效如何解决？

问题根因 #

你的代码里存在两处可导致UI不同步的问题，核心问题是状态更新时多做了一次布尔值取反：

• 你在构造updTask的时候已经将isComplete取反后传给后端，后端返回的data.isComplete已经是更新后的正确值，但你在调用setTasks时又对data.isComplete做了一次取反操作，等于第一次点击后前端状态又改回了原来的值，和后端状态不一致，所以UI不会触发更新。第二次点击时刚好又多取反一次才和实际状态对齐，所以才会重新渲染。
• 次要问题是setTasks直接使用了当前作用域下的tasks变量，可能存在闭包陷阱导致拿到的是旧的任务列表状态。

修复方案 #

直接修改setTasks部分的逻辑即可，你可以选择两种写法：

写法1：直接使用后端返回的正确状态 #

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

写法2：使用函数式更新避免闭包问题（更推荐） #

如果担心闭包导致拿到旧的tasks状态，可以用setState的函数式更新写法，确保拿到的永远是最新的状态：

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

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