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

Question

我从 function 中收到此错误，我为动态组件中使用的任何类型的属性设置动态和灵活的样式，并使用Styled Components进行样式设置。

这是useMediaQuery function：

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("")} }`;
};

这是有问题的组件Box ：

 ${({ 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"
      };`;
    }
  }}

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

我尝试将 function 结构逻辑从 Array 切换到 Static Object 但错误仍然存在，我仍然得到相同的消息： Module parse failed: Maximum call stack size exceeded

Answer 1

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

结果：

${({ 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%"};`;
    }
  }}