反应挂钩状态未更新

Question

我正在尝试新的hooks功能，并坚持认为我的状态没有更新。

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

我想过添加useCallback，并将我的方法移动到use效果或组件本身，但我可以设法让它工作。

状态：

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

母国：

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

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

谢谢

Answer 1

很难从演示中看出你想要的状态应该是什么。但是，据我所知，我相信您的use效应依赖关系应该是这样的：

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

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

此外，在useEffect回调中；如果要在更新到活动用户时运行此函数（即多次），则应删除事件侦听器或检查是否已添加侦听器，以防止在每个渲染中添加事件侦听器。