反应挂钩状态未更新

Question

我正在尝试新的挂钩功能，并坚持不更新我的状态。

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

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

州：

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

这是我的useEffect：

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

父状态：

  users: [
    {
      name: 'foo',
      forwhom: 0,
      signatures: {
        clientSignature: {
          value: ''
        }
      }
    },
    {
      name: 'bar',
      forwhom: 1,
      signatures: {
        clientSignature: {
          value: ''
        }
      }
    }
  ]

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

谢谢

Answer 1

从演示中很难看到所需的状态。 但是，据我了解，我相信您的useEffect依赖项应如下所示：

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

其他几件事； 正如@Ryan Cogswell指出的那样，您不需要在useEffect回调中重新定义activeUser 。

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