解析WebSocket返回的加密期权payload报length属性未定义错误如何修复？

错误根因 #

你遇到的报错是以下几个问题共同导致的：

• 代码中访问了不存在的payload.pairs字段，所有WebSocket返回的payload结构里都没有pairs属性，所以payload.pairs为undefined，读取它的length属性直接触发TypeError
• payload.data的结构不固定：
  • 当isMasterFrame: true时，data是包含bids、asks两个子对象的结构，每个子对象的value是单条报价记录
  • 当isMasterFrame: false时，data本身就是报价记录数组
• 原代码尝试对对象类型的报价记录调用字符串的replace方法，会触发类型错误

修复逻辑 #

1. 先统一把不同结构的data字段转换成一维的报价数组，避免结构差异导致的报错
2. 删掉不存在的pairs字段访问逻辑，直接用转换后的报价数组做循环
3. 字符串清理逻辑针对对应字符串字段执行，不要对对象调用字符串方法

修复后代码 #

let payload = JSON.parse(messageString[1]);
let quoteList = [];
// 获取当前消息对应的交易对符号，即外层数组第一个元素
const pairSymbol = messageString[0].replace(/\0/g, '');

// 统一处理不同结构的data字段，生成一维报价数组
if (payload.isMasterFrame) {
  // 主帧场景：提取bids和asks下的所有报价记录
  const { bids = {}, asks = {} } = payload.data || {};
  quoteList = [...Object.values(bids), ...Object.values(asks)];
} else {
  // 增量帧场景：data本身就是报价数组，做兼容判断避免异常
  quoteList = Array.isArray(payload.data) ? payload.data : [];
}

// 遍历处理所有报价
for (let i = 0; i < quoteList.length; i++) {
  const currentQuote = quoteList[i];
  // 如果需要清理报价里字符串字段的空字符，可以按下面的方式处理
  // currentQuote.exchange = currentQuote.exchange?.replace(/\0/g, '') || '';
  
  if (pairSymbol.toUpperCase() !== 'KILL') {
    // 可根据业务需要调整传入的参数结构，这里合并了交易对符号和单条报价信息
    props.onAddAvailablePair({
      symbol: pairSymbol,
      ...currentQuote
    });
  }
}

// 原逻辑中的isMasterFrame=false分支处理，可在这里补充你的日志打印逻辑
if (!payload.isMasterFrame) {
  console.log('收到增量帧，payload：', payload);
}

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