使用Hooks API时，React是否遵守setState的更新顺序？

核心疑问答复 #

• Hooks的状态更新严格遵守调用顺序，所有的setState调用都是异步批量处理的，同一个执行上下文（比如同一个点击事件回调）内的多次setState默认会合并为一次重渲染，不会出现某个状态先更新、其他状态延后更新的情况。你观测到的startNav先更新、另外两个状态滞后，本质是你在状态更新前打印了当前闭包内的旧状态值，属于典型的异步更新认知误区。
• 你遇到的报错核心原因是渲染判断条件和依赖状态不匹配：你用startNav作为渲染MapView的开关，但MapView正常工作的前提是destLong和destLat都有有效值，你只判断了startNav为true就渲染，没有校验两个坐标值是否存在，自然会出现startNav已经为true但坐标还是undefined的报错。

正确修复方案 #

有两种成熟的解决方案可选：

1. 直接调整渲染判断逻辑，同时校验坐标值和导航开关，成本最低：

{ startNav && destLong && destLat ? 
  <MapView 
    destLong = {destLong}
    destLat = {destLat}
  />
  :
  <View style={styles.buttonContainer}>
    {/* 原有列表渲染逻辑 */}
  </View>
}

2. 更优的方案是把三个关联状态合并为一个状态对象，从根源避免多状态更新不同步的问题：

// 初始化合并状态
const [navInfo, setNavInfo] = useState({
  destLong: undefined,
  destLat: undefined,
  startNav: false
})

// 更新的时候一次性赋值，保证所有状态同步更新
const startNavigation = (goinglong, goinglat) => {
  setNavInfo({
    destLong: goinglong,
    destLat: goinglat,
    startNav: true
  })
}

// 渲染的时候直接从navInfo里取值即可
{ navInfo.startNav ? 
  <MapView 
    destLong = {navInfo.destLong}
    destLat = {navInfo.destLat}
  />
  :
  {/* 原有列表渲染逻辑 */}
}

你之前方案的问题说明 #

• 用useEffect监听destLong更新startNav的方案触发无限循环，大概率是MapView组件内部存在修改父组件destLong的逻辑，或者你在其他地方意外修改了destLong导致依赖频繁触发，正常场景下这个写法不会触发循环。
• 仅用destLong判断渲染不生效，需要排查你传入的goinglong是否存在空值情况，或者你是否在其他地方重置了destLong的值。

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