javascript - 钩子(Hook)中的延迟状态更改

Question

所以我最近开始将一些功能更改为 hook's ，其中一个应该从 slides array 加载一些组件, 从 currentSlide 中获取位置编号然后创建一个结合这两者的标签名称。

import React, { useReducer, useRef } from "react";

const initialState = {
    slides: ['Slide1','Slide2','Slide3'],
    currentSlide: 0,
    initialX: 0,
    endX: 0
}

const reducer = (state, action) => {
    switch (action.type) {
        case 'pull-slides':
            return { ...state, slides: action.value };
        case 'swipe-right':
            return { ...state, currentSlide: state.currentSlide + 1 }
        case 'swipe-left':
            return { ...state, currentSlide: state.currentSlide - 1 }
        case 'set-initialX':
            return {
                ...state, initialX: action.position
            }
        case 'set-endX':
            return {
                ...state, endX: action.position
            }
        default:
            throw new Error('Unexpected action');
    }
}

const swipeDetection = () => {
    const [state, dispatch] = useReducer(reducer, initialState)
    const swipeArea = useRef(null)

    function _onMouseDown(e) {
        console.log(e.screenX)
        dispatch({ type: 'set-initialX', position: e.screenX })
        console.log(state)
    }

    function _onMouseUp(e) {
        console.log(e.screenX)
        dispatch({ type: 'set-endX', position: e.screenX })
        console.log(state)

        if ((state.initialX < state.endX) && ((state.endX - state.initialX) > 350)) {
            console.log('right')
            if (state.currentSlide < (state.slides.length - 1)) {
                console.log('right')
                dispatch({ type: 'swipe-right' })
            }
        } else if ((state.initialX > state.endX) && ((state.initialX - state.endX) > 350)) {
            console.log('left')
            if (state.currentSlide > 0) {
                dispatch({ type: 'swipe-left' })
               console.log('left')
            }
        }
    }

    const TagName = state.slides[state.currentSlide]

    return (
        typeof TagName == 'function' ? (
            <div className="h-100" ref={swipeArea} onMouseDown={_onMouseDown} onMouseUp={_onMouseUp}>
                <TagName />
            </div>
        ) : ''
     )
}

export default swipeDetection

为了从一个组件切换到另一个组件，我决定使用 onMouseDown/onMouseUp而不是 onMouseMove事件。

所以当你点击它时，它会存储 screenX当您释放鼠标时，将存储 screenX再次比较这两个值以查看您向左或向右滑动的距离。

据我所知，这似乎工作得很好，除了你必须在一个方向上滑动两次才能真正改变 currentSlide值(value)。

我不知道为什么会这样，因为我对 Hooks 真的很陌生我刚刚得到我的code-legs(像 see-legs 但对于程序员？)。

我尝试了不同的方法和 Material ，但我找不到任何与我的案例相关的东西，也找不到任何关于为什么会发生这样的事情的想法？

我添加了 console.log对于 e.screenX和 state检查并查看单击时发生了什么，因此当您单击它时它会立即返回 e.screenX值和 state ，但是 state由于某种原因没有更新值...

Answer 1

dispatch(就像 setState 和任何其他触发更新的 React 调用一样)被推迟，所以它不会立即运行。此外，调度会导致重新渲染，这将再次执行整个组件功能，这将在其中创建一个新的 state 变量。无论您做什么，state 都将始终指向旧状态。因此:

   state.initialX < state.endX

将始终在以前的状态上运行。要解决此问题，请执行以下操作:

1) 从状态中移除endX 和endY。如果手指抬起，你想立即检查是否有滑动。没有必要坚持这一立场。

2) reducer 只需要两个事件:touchdown 和 touchup。其他一切都应该在 reducer 内完成。

    const SlideSwiper = ({ slides }) => {
      const [{ currentSlide }, touch] = useReducer(({ currentSlide, start }, { type, position }) => {
         if(type === "up") {
           if(Math.abs(position.x - start.x) < 350 && Math.abs(position.y - start.y) < 350)
             return { currentSlide };
           }

           // TODO: Additional logic for swiping up & down?

           return { currentSlide: currentSlide + (position.x > start.x ? 1 : -1), start: null };

         } else if(type === "down") {
           return { currentSlide, start: position };
         }
      }, { currentSlide: 0, start: null });

      const touchDown = e => touch({ type: "down", position:  { x: e.clientX, y: e.clientY }});
      const touchUp = e => touch({ type: "up", position:  { x: e.clientX, y: e.clientY }});

      const slide = slides[currentSlide];
      //...
  });