有没有更好的方法来统计API的结果

Question

这可能是一个新手问题。

我很确定我没有以最有效的方式做到这一点。最重要的是，我有具有严重性和状态的票证。我想计算每种严重性有多少以及每种状态有多少。这么漫长的路是正确的方法吗？

我觉得我应该将 const 转换为基于六行中每种可能结果动态生成的名称，而不是这种方式。

提前致谢

    const totalTicketsCount = useMemo(() => {
        if (!tickets?.results) {
            return 0;
        }

        return tickets.results.length;
    }, [tickets]);

    const newTicketsCount = useMemo(() => {
        if (!tickets?.results) {
            return 0;
        }

        return tickets.results.filter(ticket => ticket.status === 'new').length;
    }, [tickets]);

    const inProgressTicketsCount = useMemo(() => {
        if (!tickets?.results) {
            return 0;
        }

        return tickets.results.filter(ticket => ticket.status === 'in_progress').length;
    }, [tickets]);

    const closedTicketsCount = useMemo(() => {
        if (!tickets?.results) {
            return 0;
        }

        return tickets.results.filter(ticket => ticket.status === 'closed').length;
    }, [tickets]);

    // Calculate the ratio
    const ratio = 100 / totalTicketsCount;

    const criticalCount = useMemo(() => {
        if (!tickets?.results) {
            return 0;
        }

        return tickets.results.filter(ticket => ticket.severity === 'critical').length;
    }, [tickets]);

    const highCount = useMemo(() => {
        if (!tickets?.results) {
            return 0;
        }

        return tickets.results.filter(ticket => ticket.severity === 'high').length;
    }, [tickets]);

    const mediumCount = useMemo(() => {
        if (!tickets?.results) {
            return 0;
        }

        return tickets.results.filter(ticket => ticket.severity === 'medium').length;
    }, [tickets]);

    const lowCount = useMemo(() => {
        if (!tickets?.results) {
            return 0;
        }

        return tickets.results.filter(ticket => ticket.severity === 'low').length;
    }, [tickets]);

    const informationalCount = useMemo(() => {
        if (!tickets?.results) {
            return 0;
        }

        return tickets.results.filter(ticket => ticket.severity === 'informational').length;
    }, [tickets]);

Answer 1

是的，您可以创建新的自定义挂钩

useTickets.js

，通常这些自定义挂钩放置在

hooks

文件夹中。

您可以使用以下内容来开始：

// FILE: useTickets.js
// HERE: ticketsData = tickets.results
export const useTickets = (ticketsData) => {

  const data = Array.isArray(ticketsData) || [];

  const ticketsCount = data.length;

  const ticketsDetails = data.reduce((acc, ticket) => {
    const result = acc;

    switch(ticket.status) {
      case 'new': {
        result.newCount += 1;
        break;
      }
      case 'in_progress': {
        result.inProgressCount += 1;
        break;
      }
      // etc..
    }

    return result;
  }, {
      newCount: 0,
      inProgressCount: 0
    };)

  return {
    totalCount: ticketsCount,
    ...ticketsDetails,
  }
};

要使用这个钩子，只需将其导入到您的脚本中并调用如下：

const ticketsDetails = useTickets(tickets.results);