Javascript Promise Chain中的第二个useState不更新

使用Reaction Native，这款应用程序需要:

1. 移动对象
2. 然后在屏幕上更新文本(一个数字)
3. 然后移动另一个物体
4. 然后更新屏幕上的相同文本(另一个数字)

Problem: #4 does not update on the screen.

这GIT link显示当前代码.

谷歌解释了这个问题:"React中的useState钩子在Promise Chain中不会更新两次.这是因为Reaction批处理状态更新，这意味着在一个事件循环周期内发生的所有状态更新被组合在一起，并在周期结束时apply.这有助于通过避免不必要的重新呈现来提高性能."

因此，也许这个按钮应该一个接一个地调用两个Promises，每个Promises都链接到useState更新.第二个promise动画可以具有与第一个动画相同的持续时间的延迟，以使它们连续.我还没有插上电源试一下，很快就可以了.

动画功能看起来像这样:

  function updateNumCatsMoved(){
    let newNumCats = { ... numCatsMoved };
    newNumCats.value = newNumCats.value + 1;
    setNumCatsMoved(newNumCats);
    console.log("numCatsMoved:",numCatsMoved.value);
  };

  async function pressablePromise(){
    new Promise(function(myResolve, myReject) {
      cat1X.value = withTiming(cat1XEnd, config);
      cat1Y.value = withTiming(cat1YEnd, config, () => {
        runOnJS(myResolve)(); 
      }); 
    })

    .then(function() {  return updateNumCatsMoved();})

    .then(
      function() { 
        cat2X.value = withTiming(cat2XEnd, config);
        cat2Y.value = withTiming(cat2YEnd, config, () => {
          return; 
        }); 
      }
    )
     // doesn't update on the screen 
    .then(function() {  return updateNumCatsMoved();})  
  }