React JS滑動功能無法按預期工作

Question

我正在嘗試在我的應用程序中實現一些滑動功能，但是我目前正在努力獲得所需的正確行為。

我有一個名為onTouchStart的函數， onTouchStart當前觸摸對象的clientX和clientY位置保存到狀態，如下所示：

touchStart(e) {
    const touchObj = e.touches[0];
    this.setState({
        startX: touchObj.clientX,
        startY: touchObj.clientY,
    })
}

用戶開始在屏幕上移動手指后，我調用了另一個函數onTouchMove ，該函數保存了當前的clientX和clientY位置：

touchMove(e) {
    const touchObj = e.touches[0];
    this.setState({
        currentX: touchObj.clientX,
        currentY: touchObj.clientY,
    })
}

為了弄清楚是up滑動還是down滑動，我調用了另一個函數，該函數采用開始位置並取走當前位置。 我還將其與150的threshold進行比較，以確保它是一次實際滑動，而不是長時間滑動（如滾動）。 看起來像這樣：

touchEnd(e) {
    this.setState({
        touchStarted: false,
    })
    if (Math.abs(this.state.startX - this.state.currentX) < this.state.threshold) {
        this.setState({
            direction: this.state.startY > this.state.currentY ? "top" : "bottom",
        })
        console.log(this.state.direction);
    }
}

問題

這是檢測up和down刷卡細，但在非常第一滑動用戶執行，所述的console.log返回的原始狀態none （而不是up或down ）。

如何確保初始滑動始終設置為正確的方向？

問題繼續存在，用戶必須在相反的方向上滑動兩次才能將狀態保存到要滑動的實際方向上，如下所示：

上//沒有
向上//向上
向下//向上
下//下

很抱歉，如果我沒有很好地闡明我的問題。 這是指向CodePen的鏈接 ，您可以在其中進一步詳細了解問題（需要電話或仿真器才能查看觸摸事件）。

這也是到我一直關注以使此功能正常工作的帖子的鏈接 。

任何指針將不勝感激。 謝謝！

Answer 1

這是固定筆的鏈接。

touchEnd(e) 
{
    var s = {
      touchStarted: false
    };

    if (Math.abs(this.state.startX - this.state.currentX) < this.state.threshold) 
    {
        s.direction = this.state.startY > this.state.currentY ? "top" : "bottom";
    }

    this.setState(s, () => console.log(this.state.direction))
}

唯一的“問題”是您假設setState是同步的，因此在調用它后立即檢查狀態值，而並非如此。 如果要在setState完成后檢查狀態的值，請使用其第二個參數傳遞回調函數。