反應掛鈎狀態未更新

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），則應刪除事件偵聽器或檢查是否已添加偵聽器，以防止在每個渲染時添加事件偵聽器。