使用Server-Sent Events时Context值重复100次日志及Payload过大问题求助

我正在开发一个基于Server-Sent Events（SSE）的项目，核心目标是在数据变化时自动更新组件。目前功能可以正常运行，但遇到两个异常问题：

• 用户登录、插入卡片或登出时，同一条日志会重复输出100次
• 终端抛出PayloadTooLargeError: request entity too large错误

错误日志 #

LOG  {"errorLevel": 0, "messageId": "Z026", "text": "Good bye, see you soon"}
LOG  {"errorLevel": 0, "messageId": "Z026", "text": "Good bye, see you soon"}
...（重复100次）
LOG  {"errorLevel": 6, "messageId": "", "text": ""}
LOG  {"errorLevel": 6, "messageId": "", "text": ""}
PayloadTooLargeError: request entity too large
at readStream (/Users/michielvandam/Desktop/DRGT/drInfokiosk/node_modules/raw-body/index.js:167:7)
at getRawBody (/Users/michielvandam/Desktop/DRGT/drInfokiosk/node_modules/raw-body/index.js:119:12)
at read (/Users/michielvandam/Desktop/DRGT/drInfokiosk/node_modules/body-parser/lib/read.js:79:3)
at jsonParser (/Users/michielvandam/Desktop/DRGT/drInfokiosk/node_modules/body-parser/lib/types/json.js:138:5)
at call (/Users/michielvandam/Desktop/DRGT/drInfokiosk/node_modules/connect/index.js:239:7)
at next (/Users/michielvandam/Desktop/DRGT/drInfokiosk/node_modules/connect/index.js:183:5)
at remoteDevtoolsCorsMiddleware (/Users/michielvandam/Desktop/DRGT/drInfokiosk/node_modules/@expo/dev-server/build/middleware/remoteDevtoolsCorsMiddleware.js:36:3)
at call (/Users/michielvandam/Desktop/DRGT/drInfokiosk/node_modules/connect/index.js:239:7)
at next (/Users/michielvandam/Desktop/DRGT/drInfokiosk/node_modules/connect/index.js:183:5)
at serveStatic (/Users/michielvandam/Desktop/DRGT/drInfokiosk/node_modules/serve-static/index.js:75:16)

相关代码 #

Message组件 #

const Message: FunctionComponent = () => {
  const { cardError } = useJPContext();

  console.log(cardError);

  const [showMessage, setShowMessage] = useState(false);

  useEffect(
    () => {
      if (cardError.text !== "") {
        setShowMessage(true);
      } else {
        setShowMessage(false);
      }
    },
    [cardError.text]
  );

  return (
    <MessageBox style={{ display: showMessage ? "flex" : "none" }}>
      <MessageBoxText>
        {cardError.text}
      </MessageBoxText>
      <MessageBoxCode>
        {cardError.messageId}
      </MessageBoxCode>
    </MessageBox>
  );
};

export default memo(Message);

Context代码 #

const JPContextProviderMemo = ({ children }) => {
  const [pointsData, setPointsData] = useState(standardPointsLimit);
  const [userData, setUserData] = useState(standardLoginData);
  const [cardError, setCardError] = useState({
    errorLevel: 0,
    messageId: "",
    text: ""
  });

  const updatePointsLimit = d => {
    const data = d;
    setPointsData(data);
  };

  const updateUserData = d => {
    const updatedUserData = d;
    setUserData(updatedUserData);
  };

  const updateCardError = d => {
    const cardError = d;
    setCardError(cardError);
  };

  return (
    <JpContext.Provider
      value={{
        pointsData,
        updatePointsLimit,
        userData,
        updateUserData,
        cardError,
        updateCardError
      }}
    >
      {children}
    </JpContext.Provider>
  );
};

export const JPContextProvider = memo(JPContextProviderMemo);

内容的提问来源于stack exchange，提问作者Thomasino73