如何将WebSocket接收的数据写入对象二维数组？

关键问题分析 #

你的现有代码存在几个潜在问题：inc变量未定义、直接通过索引赋值可能导致数组越界、若需要累积时序数据则覆盖现有元素不符合需求。以下是修正后的实现方案：

完整实现代码 #

// 定义全局作用域的递增x值，初始为0
let inc = 0;

myWs.onmessage = function (message) {
    const jsonParse = JSON.parse(message.data);    
    try {  
        // 遍历每个折线数据条目
        mockLineData.forEach((lineItem, lineIndex) => {
            // 检查WebSocket返回的对应数据是否存在
            const targetData = jsonParse[lineIndex];
            if (!targetData || typeof targetData.value_state === 'undefined') return;

            // 方案1：动态添加新数据点（适合累积时序数据）
            lineItem.data.push({
                x: inc,
                y: targetData.value_state
            });

            // 方案2：覆盖已有位置的数据（适合固定长度的更新场景）
            // if (lineItem.data[lineIndex]) {
            //     lineItem.data[lineIndex].x = inc;
            //     lineItem.data[lineIndex].y = targetData.value_state;
            // }

            console.log(lineItem.data.at(-1).y);
        });
        // 每次接收消息后递增x轴值
        inc++;
    } catch (error) {
        console.log('Error: ', error);
    }
};

export const mockLineData = [
  {
    id: "ИБП Uвх",
    color: tokens("dark").redAccent[200],
    data: [
      {
        x: 0, 
        y: 1,
      },
    ],
  },
];

核心要点说明 #

• 避免数组越界：使用forEach遍历mockLineData，同时检查jsonParse对应索引的数据是否存在，防止因数据长度不匹配抛出错误
• 数据更新策略：
  • 若为时序数据，推荐用push动态添加新数据点，实现数据累积
  • 若需固定位置更新，可保留索引赋值逻辑，但需确保目标位置已有元素
• 变量作用域：inc需定义在onmessage外部，保证每次接收消息时能持续递增，生成连续的x轴值

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