承诺链中的第二个 useState 未更新

Question

使用 React Native，这个应用程序需要：

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

问题：#4 无法在屏幕上更新。

此 GIT 链接 显示当前代码。

动画功能如下所示：

  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();})  
  }

疯狂的想法，如果 UI 被迫进行另一次更新，也许它会更新，就像透明的 1 像素对象在另一个 thenable 中进行动画处理一样。

Answer 1

withTiming 回调函数似乎是一个异步函数。

所以你需要更新

.then(
      function() { 
        cat2X.value = withTiming(cat2XEnd, config);
        cat2Y.value = withTiming(cat2YEnd, config, () => {
          return; 
        }); 
      }
    )

到

.then(
      function() {
        return new Promise((resolve, reject)=>{
          cat2X.value = withTiming(cat2XEnd, config);
          cat2Y.value = withTiming(cat2YEnd, config, () => {
            resolve(); 
          }); 
        })
      }
    )