javascript - 点击某个自定义按钮，实现表格数据刷新？

Question

let PortData = reactive({  tableData: [], // 列表数据  lanPortId: '',// 网络端口输出id  NetworkCard: '',// 网卡--右上文字  IpAddress: '',// IP地址--右上文字  Port: ''// 端口--右上文字})onMounted(() => {  nextTick(() => {    GetSerID();  })})// 先进行 获取端口数据量的请求，查询到对应的id，然后再讲id传递给getInitialTableData函数通过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 >= '21' && formattedPortId <= '24') {//只显示0x21-0x24的数据        acc.push({          portId: formattedPortId,          rate,          thruput,        });      }    }    return acc;  }, []);  for (const item of result) {    // 将“端口数据量”接口获取到的id传递给GetPacketHeaderFreq函数,以便于获取报文头频率数据    await GetPacketHeaderFreq(item.portId)  }}// 获取报文头频率数据async function GetPacketHeaderFreq(id: any) {  const data = { port_id: parseInt(id, 16) }  const OutCfgList = await api.GetPortOut(data);  const { data: res } = OutCfgList;  const portId = res.port_id.toString(16).padStart(2, '0');  const formattedFrequency = Object.entries(res)    .filter(([key, value]) => key.endsWith('_freq') && value !== 0)    .map(([key, value]) => `${key.replace('_freq', '').toUpperCase()}/${value}`)    .join('; ');  // 如果报文/频率为空，则执行变为使能按钮，并且隐藏掉编辑框语句  if (formattedFrequency === '') {    buttonText.value = '使能'    iconVisible.value = false  } else {    buttonText.value = '禁止'    iconVisible.value = true  }  const forma = ''  if (portId >= '21' && portId <= '24') {//只显示0x21-0x24的数据    await getInitialTableData(id, formattedFrequency)// 调用获取表格数据函数，传入端口数据量的id和报文/频率参数  } else {    await getInitialTableData(id, forma)//未在此范围就不传递报文/频率参数  }}//获取列表中其他的数据（网络端口id，端口使能，类型,连接状态......）async function getInitialTableData(id: any, formattedFrequency: string) {  // 这里的id是端口数据量接口传递过来的(16进制的11转为10进制发送)  const data = { lan_port_id: parseInt(id, 16) }  const GetTableData = await api.GetLanPortCfg(data)  const { data: res } = GetTableData  //  判断是否需要添加到表格中     if (previousId.value.includes(res.lan_port_id)) {    return;  }  previousId.value.push(res.lan_port_id);  const portId = res.lan_port_id.toString(16).padStart(2, '0');  //根据返回的连接状态，再表格内是否显示“连接”还是“断开”按钮  if (res.state === false) {    ConnectState.value = true  } else {    ConnectState.value = false  }  // 如果portId返回的不在0x21和0x24 之间就不显示  if (portId >= '21' && portId <= '24') {    const tableData = [      {        lan_port_id: res.lan_port_id.toString(16).padStart(2, '0'),//16===>10  id        network_card: '有线',//网卡        en: res.en, //端口使能        type: res.type,//类型        dst_ip: res.dst_ip,//目标ip        port: res.port,//端口号        formattedFrequency: formattedFrequency, // 添加formattedFrequency属性        state: res.state//连接状态      }    ];    // console.log('lan口列表数据源', tableData);    PortData.tableData = [...PortData.tableData, ...tableData];  }}// 点击保存按钮，实现表格数据的更新async function save() {  const data = {    port_id: Number(sessionStorage.getItem('lanPortId')),    state: 1,    kcn_freq: Number(INS.input_kcn),    inspva_freq: Number(INS.input_inspva),    inspvax_freq: Number(INS.input_inspvax),    bestpos_freq: Number(INS.input_bestpos),    gga_freq: Number(GNSS.input_gga),    rmc_freq: Number(GNSS.input_rmc),    dop_freq: Number(GNSS.input_dop),    gsa_freq: Number(GNSS.input_gsa),    gsv_freq: Number(GNSS.input_gsv),    heading_freq: Number(GNSS.input_heading),    zda_freq: Number(GNSS.input_zda),    gst_freq: Number(GNSS.input_gst),    rawimu_freq: Number(RAW.input_rawimu),    imudataa_freq: Number(RAW.input_imudataa),    sta_freq: Number(OTHER.input_sta),    dev_freq: Number(OTHER.input_dev),  }  const SetData = await api.SetPortOut(data)  const { data: res } = SetData  if (res.error_code === 0) {    await GetSerID();//初始化列表    return ElMessage({ message: res.msg, type: 'success', showClose: true })  } else {    return ElMessage({ message: res.msg, type: 'error', showClose: true })  }}

我根据上面代码，在点击保存按钮，save()内，调用GetSerID()函数来初始化列表来达到列表数据更新，但是没反应？麻烦各位大佬们帮忙看看，谢谢~

Answer 1

提几个问题

1. 你在 save 之后再获取列表时并没有将原有的列表置空，而是直接往里面填数据，这样是否会造成数据重复
2. PortData.tableData = [...PortData.tableData, ...tableData] 可以改成 PortData.tableData.push(...tableData)