如何解决表格数据渲染中多个接口调用导致数据覆盖的问题？

<code class="javascript">// 获取初始列表数据（获取串口ID）
async function GetSerID() {
  const SerIDList = await api.GetSerialId();
  const { data: res } = SerIDList;
  const result = res.port_thruput.split(",").reduce((acc, curr, index, array) => {
    if (index % 3 === 0) {
      const [portId, rate, thruput] = array.slice(index, index + 3);
      const formattedPortId = parseInt(portId).toString(16).padStart(2, '0');
      if (formattedPortId >= '01' && formattedPortId <= '0F') {
        acc.push({ portId: formattedPortId, rate, thruput, formattedFrequency: '' }); // 添加空字段formattedFrequency
      }
      return acc;
    }
    return acc;
  }, []);
  SerialForm.tableData = result; // 更新表格数据
  await GetFrequencyData(result); // 调用第二个接口获取频率数据
}

// 获取频率数据并合并到表格数据中
async function GetFrequencyData(tableData) {
  const frequencyData = await api.GetFrequency();
  const { data: res } = frequencyData;
  // 遍历tableData，查找对应的portId
  for (const item of tableData) {
    const portId = item.portId;
    const filteredData = Object.entries(res)
    .filter(([key, value]) => key.includes(portId) && value !== 0)
    .map(([key, value]) => ({ key, value }));
    let formatted = filteredData.map(({ key, value }) => `${key.replace('_FREQ', '').toUpperCase()}/${value}`);
    item.formattedFrequency = formatted.join('; '); // 合并数据
  }
  SerialForm.tableData = tableData; // 更新表格数据
}
</code>