Question

我正在尝试使用新的挂钩功能，并停留在状态未更新的情况下。

实际上状态是更新的（我可以在console.log中看到更新的值，并且我的组件重新运行useEffect），但是useEffect方法使用我的旧状态并将签名保存到仅第一个用户，而活动用户确实已更改在该州。

我考虑过添加useCallback并将我的方法移至useEffect或组件本身，但是我可以设法使其正常工作。

状态：

function showtablediv(){

    var xfor = document.getElementById('foreachhold');
    var xtable = document.getElementById('tableviewhold');

    if(xfor.style.display == 'block')
        xfor.style.display = 'none';
    else
      xfor.style.display = 'block';
}
function showtablediv(){

    var xfor = document.getElementById('foreachhold');
    var xtable = document.getElementById('tableviewhold');

    if(xfor.style.display == 'block')
        xfor.style.display = 'none';
        xtable.style.display ='block';       
else
      xfor.style.display = 'block';
}

这是我的useEffect：

const inititalState = {
  displayHolder: true,
  activeUser: 0,
  signatureDate: new Date().toLocaleDateString('he'),
};

这是我的减速器：

useEffect(() => {
    try {
        ...
        canvas._canvas.addEventListener('mousedown', throttle(() => handleSignatureStart(dispatch), 500));
        canvas._canvas.addEventListener(
            'mouseup',
            throttle(() => handleSignatureEnd(activatedUser, name, canvas, onFinish), 500),
        );

        ...

        // set to new signature and date
        if (signature && typeof signature === 'string') {
            dispatch({ type: 'setSignatureDetails', payload: { displayHolder: false, signatureDate } });
            canvas.fromDataURL(signature);
        } else {
            dispatch({
                type: 'clearSignatureDetails',
                payload: { displayHolder: true, signatureDate: new Date().toLocaleDateString('he') },
            });
        }

        //umount
        return () => {
            if (canvas) {
                canvas._canvas.removeEventListener('mousedown', handleSignatureStart);
                canvas._canvas.removeEventListener('mouseup', handleSignatureEnd);
            }
        };
    } catch (error) {
        console.error(error);
    }
}, [dispatch]);

父状态：

const signatureReducer = (state, { type, payload }) => {
    console.log('@@@@', type, '@@@');
    switch (type) {
        case 'setSignatureDetails': {
            const { displayHolder, signatureDate, activeUser } = payload;
            const activeUserReady = activeUser === 0 || activeUser ? activeUser : state.activeUser;
            console.log(activeUser, activeUserReady);
            return { ...state, displayHolder, signatureDate, activeUser: activeUserReady };
        }
        case 'clearSignatureDetails': {
            const { displayHolder, signatureDate } = payload;
            return { ...state, displayHolder, signatureDate };
        }
        case 'hidePlaceholder': {
            const { displayHolder } = payload;
            return { ...state, displayHolder };
        }
        case 'showPlaceholder': {
            const { displayHolder, activeUser } = payload;
            const activeUserReady = activeUser === 0 || activeUser ? activeUser : state.activeUser;
            console.log(activeUser, activeUserReady);
            return { ...state, displayHolder, activeUser: activeUserReady };
        }
        default:
            return state;
    }
};

这是我项目的一部分，有可能证明我的问题。 https://stackblitz.com/edit/react-51j5i6

谢谢

Answer 1

很难从演示中看到所需的状态。但是，据我了解，我相信您的useEffect依存关系应该是这样的：

useEffect(() => {
  ...
}, [activeUser]);

另外两件事；正如@Ryan Cogswell所指出的那样，您无需在useEffect回调中重新定义activeUser。

此外，在useEffect回调内部；如果您打算在更新活动用户时多次运行此功能（即IE），则应该删除事件侦听器，或者检查是否已添加侦听器，以防止在每个渲染器中添加事件侦听器。

反应挂钩状态未更新

1 个答案: