React中数组对象stopTime求和遇API延迟问题求助

问题说明 #

需要计算数组对象中stopTime字段的总和，已编写reduce求和代码，但由于API请求存在延迟，页面加载完成时数据尚未返回，求和结果始终为0。

API响应示例：

[
    {
        "id": 1,
        "stopCause": "Stop Cause 1",
        "stopTime": 3,
        "stopOperator": "Somebody",
        "createdAt": "2023-06-26T10:29:31.000Z",
        "updatedAt": "2023-06-26T10:29:31.000Z",
        "OrderId": 1
    },
    {
        "id": 2,
        "stopCause": "Stop Cause 3",
        "stopTime": 5,
        "stopOperator": "Somebody",
        "createdAt": "2023-06-26T10:29:37.000Z",
        "updatedAt": "2023-06-26T10:29:37.000Z",
        "OrderId": 1
    },
    {
        "id": 3,
        "stopCause": "Stop Cause 4",
        "stopTime": 12,
        "stopOperator": "Username",
        "createdAt": "2023-06-28T06:45:24.000Z",
        "updatedAt": "2023-06-28T06:45:24.000Z",
        "OrderId": 1
    }
]

现有求和代码：

const totalStopTime = stopTime.reduce(
    (acc, curr) => acc + parseInt(curr.stopTime),
    0
);

解决方案 #

核心思路：必须确保求和逻辑在API数据返回后再执行，以下是不同场景下的实现方式：

1. 原生JavaScript场景

将求和代码放在API请求的成功回调中，等待数据返回后再计算：

// 示例使用fetch发起请求，XMLHttpRequest逻辑类似
fetch('/api/your-data-endpoint')
  .then(response => response.json())
  .then(data => {
    // 数据返回后执行求和
    const totalStopTime = data.reduce(
      (acc, curr) => acc + parseInt(curr.stopTime),
      0
    );
    // 将结果渲染到页面
    document.getElementById('total-stop-time').textContent = `总停机时长：${totalStopTime}`;
  })
  .catch(error => console.error('API请求失败:', error));

2. React场景

利用React的状态管理，数据更新时自动触发重新计算：

import { useState, useEffect } from 'react';

function StopTimeTotal() {
  const [stopTimeData, setStopTimeData] = useState([]);

  // 组件挂载时发起API请求
  useEffect(() => {
    fetch('/api/your-data-endpoint')
      .then(res => res.json())
      .then(data => setStopTimeData(data))
      .catch(err => console.error(err));
  }, []);

  // 数据更新时自动重新计算总和
  const totalStopTime = stopTimeData.reduce(
    (acc, curr) => acc + parseInt(curr.stopTime),
    0
  );

  return (
    <div>总停机时长：{totalStopTime}</div>
  );
}

export default StopTimeTotal;

3. Vue场景

借助Vue的响应式特性与计算属性，实现数据更新自动求和：

<template>
  <div>总停机时长：{{ totalStopTime }}</div>
</template>

<script>
export default {
  data() {
    return {
      stopTimeData: []
    };
  },
  // 计算属性会在依赖数据变化时自动重新计算
  computed: {
    totalStopTime() {
      return this.stopTimeData.reduce(
        (acc, curr) => acc + parseInt(curr.stopTime),
        0
      );
    }
  },
  mounted() {
    // 组件挂载后发起API请求
    fetch('/api/your-data-endpoint')
      .then(res => res.json())
      .then(data => this.stopTimeData = data)
      .catch(err => console.error(err));
  }
};
</script>

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