React useState更新状态首次触发页面未同步渲染问题

问题根因 #

更新滞后一次的问题核心是状态更新写法违反React设计原则，和useState异步特性无直接关联：

• 违反状态不可变要求：代码中setUser(Object.assign(user, {entries: count}))的写法，会把原state中的user对象作为Object.assign的目标参数，直接修改原state对象的属性，最终返回的还是同一个内存地址的对象。React对state更新做浅比较，检测到对象引用没有变化时不会触发重渲染，这是首次点击页面不更新的直接原因。
• 存在闭包过期值隐患：onPictureSubmit中读取的user是当前渲染周期闭包缓存的值，如果连续快速触发提交，可能拿到旧的state值，导致后续更新逻辑出错。
• 附带语法问题：setImageUrl(input)是React的状态更新方法，本身不返回Promise，后续直接链式调用.then()会抛出运行时错误，属于省略业务逻辑时的笔误，实际编码时要注意状态更新方法不能直接接Promise链式调用。

修复方案 #

修改entries字段的状态更新逻辑，始终保证传给setUser的是全新创建的对象，推荐用函数式更新彻底规避闭包问题：

.then(count => {
  // 函数式更新中prevUser永远是最新的state值，不受闭包缓存影响
  // 通过展开运算符创建新对象，拷贝原user所有属性后覆盖entries为最新值
  setUser(prevUser => ({
    ...prevUser,
    entries: count
  }))
})

如果习惯用Object.assign写法，必须把空对象作为第一个参数，绝对不能直接传入原state对象：

// 正确的Object.assign写法：空对象作为拷贝目标，不会修改原state
setUser(Object.assign({}, user, {entries: count}))

给出的Rank组件、后端接口代码逻辑没有问题，不需要调整。

效果验证 #

修改后每次触发onPictureSubmit，React都能检测到user对象的引用变化，立即触发组件重渲染，Rank组件会同步展示最新的entries计数，不会再出现更新滞后一次的问题。

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