模块解析失败：超出最大调用堆栈大小

Question

我从我为动态组件和样式中使用的任何类型的属性的动态和灵活样式创建的函数中收到此错误样式组件.

这是使用媒体查询功能：

export const useMediaQuery = (arr: Array<string | number>, name: string) => {
  if (!arr || !name) return;

  const query = new Array<string>();

  for (let i = 0; i < arr.length; i++) {
    query.push(`@media (min-width: ${
      queryBreakpoints[i === 0 ? 0 : i - 1]
        ? typeof queryBreakpoints[i === 0 ? 0 : i - 1] === "number"
          ? `${queryBreakpoints[i === 0 ? 0 : i - 1]}px`
          : queryBreakpoints[i === 0 ? 0 : i - 1]
        : `${0}px`
    }) and (max-width: ${
      typeof queryBreakpoints[i] === "number"
        ? `${queryBreakpoints[i]}px`
        : queryBreakpoints[i]
    }) {
        ${name}: ${
      typeof arr[i] === "number" ? `${arr[i]}px` : arr[i] ? arr[i] : "auto"
    };
    }`);
  }

  query.push(`@media (min-width: ${
    queryBreakpoints[arr.length === 1 ? 0 : arr.length - 1]
      ? typeof queryBreakpoints[arr.length === 1 ? 0 : arr.length - 1] ===
        "number"
        ? `${queryBreakpoints[arr.length === 1 ? 0 : arr.length - 1]}px`
        : queryBreakpoints[arr.length === 1 ? 0 : arr.length - 1]
      : `${0}px`
  }) {
        ${name}: ${
    typeof arr[arr.length === 1 ? 0 : arr.length - 1] === "number"
      ? `${arr[arr.length === 1 ? 0 : arr.length - 1]}px`
      : arr[arr.length === 1 ? 0 : arr.length - 1]
      ? arr[arr.length === 1 ? 0 : arr.length - 1]
      : "auto"
  }};`);

  return `& { ${query.join("")} }`;
};

这是有问题的组件盒子:

 ${({ w }) => {
    if (typeof w === "object") {
      return useMediaQuery(w, "width");
    } else {
      return `width: ${typeof w === "number" ? `${w}px` : w ? w : "100%"};`;
    }
  }}
  ${({ maxWidth }) => {
    if (typeof maxWidth === "object") {
      return useMediaQuery(maxWidth, "max-width");
    } else {
      return `max-width: ${
        typeof maxWidth === "number"
          ? `${maxWidth}px`
          : maxWidth
          ? maxWidth
          : "unset"
      };`;
    }
  }}
  ${({ h }) => {
    if (typeof h === "object") {
      return useMediaQuery(h, "height");
    } else {
      return `height: ${typeof h === "number" ? `${h}px` : h ? h : "100%"};`;
    }
  }}
  ${({ maxHeight }) => {
    if (typeof maxHeight === "object") {
      return useMediaQuery(maxHeight, "max-height");
    } else {
      return `max-height: ${
        typeof maxHeight === "number"
          ? `${maxHeight}px`
          : maxHeight
          ? maxHeight
          : "unset"
      };`;
    }
  }}

它太大了，不能一块放在这里但是所有类型的样式属性的逻辑都是一样的，这个函数被称为一共25次在使用它的组件中，我的问题是为什么会发生此错误，因为它不会创建无限循环，甚至更改其结构以使用一种对象，它不断给出相同的错误，有人知道如何解释和指导我吗？我做了很多研究，但它们都把我引向了一个完全不同的问题，它只处理无限循环。

我尝试将函数结构逻辑从 Array 切换到 Static Object 但错误仍然存​​在，我仍然收到相同的消息：模块解析失败：超出最大调用堆栈大小

Answer 1

显然，由于对函数的调用次数，错误仍然存​​在，无论是静态的还是循环的，我决定处理样式表中的属性，这样就解决了！

结果：

${({ w }) => {
    if (typeof w === "object") {
      const query = new Array<string>();
      const name = "width";

      for (let i = 0; i < w.length; i++) {
        query.push(`@media (min-width: ${
          queryBreakpoints[i === 0 ? 0 : i - 1]
            ? typeof queryBreakpoints[i === 0 ? 0 : i - 1] === "number"
              ? `${queryBreakpoints[i === 0 ? 0 : i - 1]}px`
              : queryBreakpoints[i === 0 ? 0 : i - 1]
            : `${0}px`
        }) and (max-width: ${
          typeof queryBreakpoints[i] === "number"
            ? `${queryBreakpoints[i]}px`
            : queryBreakpoints[i]
        }) {
            ${name}: ${
          typeof w[i] === "number" ? `${w[i]}px` : w[i] ? w[i] : "auto"
        };
        }`);
      }

      query.push(`@media (min-width: ${
        queryBreakpoints[w.length === 1 ? 0 : w.length - 1]
          ? typeof queryBreakpoints[w.length === 1 ? 0 : w.length - 1] ===
            "number"
            ? `${queryBreakpoints[w.length === 1 ? 0 : w.length - 1]}px`
            : queryBreakpoints[w.length === 1 ? 0 : w.length - 1]
          : `${0}px`
      }) {
            ${name}: ${
        typeof w[w.length === 1 ? 0 : w.length - 1] === "number"
          ? `${w[w.length === 1 ? 0 : w.length - 1]}px`
          : w[w.length === 1 ? 0 : w.length - 1]
          ? w[w.length === 1 ? 0 : w.length - 1]
          : "auto"
      }};`);

      return `& { ${query.join("")} }`;
    } else {
      return `width: ${typeof w === "number" ? `${w}px` : w ? w : "100%"};`;
    }
  }}