React子组件可见更新后state但父组件回调获取不到问题排查

• 回调闭包陈旧问题
  这是该场景下最高发的原因。函数组件每次渲染都会生成新的callback实例，实例内部会捕获当前渲染批次的items状态：
  1. 检查callback是否用useCallback包裹且未将items加入依赖数组，导致始终返回第一次渲染生成的旧callback，内部捕获的items永远是初始空数组
  2. 检查Child组件是否用React.memo包裹，因为旧callback引用未发生变化，Child没有更新拿到新的callback，触发时调用的还是旧版本
• 状态更新时序/覆盖问题
  1. 确认触发onClick前，setItems的异步更新已经真正落地，可在Parent组件顶部加console.log(items)打印每次渲染的状态值验证
  2. 检查是否存在其他调用setItems的逻辑，在新增项之后、点击触发之前把新增的项意外删除/覆盖了
• 值匹配问题
  1. 验证传入callback的id类型与items中存储的id类型是否一致，比如子组件传的是字符串"100"，而状态中存的是数字100，如果实际代码用的是===判断就会匹配失败
  2. 确认实际业务场景中新增项的id生成逻辑正确，不存在生成的id与传递的id不匹配的问题
• 组件实例异常问题
  检查Parent组件是否被设置了不稳定的key，或者存在多个Parent实例，导致状态更新的是其中一个实例，而触发回调的是另一个状态未更新的实例

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