React-Maximum call stack size exceeded

Maximum call stack size exceeded

字面上意思是超过了最大调用堆栈大小

一般在循环调用的时候，出现了死循环

场景1：

使用 useState 的时候，useState会触发重绘，假如重绘的时候又触发useState，就产生了死循环

如下极端例子

const TableList: React.FC = () => {
    const [showDetail, setShowDetail] = useState<boolean>(false);
    
    // 每一次重绘都执行下面的语句，执行完后，又会重绘，又执行setShowDetail
    setShowDetail(true);
    
    return <></>;
}

场景2：

在使用树形组件的时候，例如树形表格，数据源有parent，如下所示的数据源

const data: TreeItem[] = [];
res.content?.items.forEach(item => {
  const community: TreeItem = {
    name: item.name,
    ico: item.ico,
    flag: item.flag,
    orderWeight: item.orderWeight,
    children: []
  };
  data.push(community);
  item.apps.forEach(app => {
    community.children?.push({
      parent: community,  // 看这里
      name: app.name,
      ico: app.ico,
      flag: app.flag,
      orderWeight: item.orderWeight,
    });
  });
});

上面的children包含了parent，parent又包含了children

在树状组件中可能进行了遍历的过程，如果是上面的示例，则可能会死循环

这个问题发现在 ant.design pro 的ProTable 组件中，解决办法是改下parent的值

const data: TreeItem[] = [];
res.content?.items.forEach(item => {
  const community: TreeItem = {
    name: item.name,
    ico: item.ico,
    flag: item.flag,
    orderWeight: item.orderWeight,
    children: []
  };
  data.push(community);
  item.apps.forEach(app => {
    community.children?.push({
      parent: {
        name: item.name,
        ico: item.ico,
        flag: item.flag,
        orderWeight: item.orderWeight
      },
      name: app.name,
      ico: app.ico,
      flag: app.flag,
      orderWeight: item.orderWeight,
    });
  });
});