RangeError：使用 ES6 新 Map() 对象初始化反应状态值超出了最大调用堆栈大小答案

【问题标题】：RangeError: Maximum call stack size exceeded with initializing react state value with an ES6 new Map() objectRangeError：使用 ES6 新 Map() 对象初始化反应状态值超出了最大调用堆栈大小
【发布时间】：2020-03-11 04:52:57
【问题描述】：

我有一个顶级 React 组件，它使用 craco 进行如下初始化：

class Map extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      // socket: openSocket('http://localhost:5000/test'),
      junction_pos_data: [],
      xpndr_data: [],
      pods_complete_data: new Map(),
    };

出于某种原因，craco 不喜欢我使用新的 Map 作为 React 有状态值，即使我在子状态中使用它也很好。套接字连接被注释掉，当我在这里使用任何其他类型时，我也没有收到范围错误。这就是控制台向我扔的东西：

Uncaught RangeError: Maximum call stack size exceeded
    at new Map (Map.js:77)
    at new Map (Map.js:82)
    at new Map (Map.js:82)
    at new Map (Map.js:82)
    at new Map (Map.js:82)
    at new Map (Map.js:82)
    at new Map (Map.js:82)
    at new Map (Map.js:82)
    at new Map (Map.js:82)
    at new Map (Map.js:82)
    at new Map (Map.js:82)
    at new Map (Map.js:82)
    at new Map (Map.js:82)
    at new Map (Map.js:82)
    at new Map (Map.js:82)
    at new Map (Map.js:82)
    at new Map (Map.js:82)

有什么想法吗？谢谢！

【问题讨论】：

欢迎来到stackoverflow Javascript 版本！（笑）
这就是我晚上 10 点后编码所得到的结果????????‍♂️感谢@chris b！

标签： reactjs sockets

【解决方案1】：

因为您将 React 组件命名为 Map，所以该组件正在递归地初始化自身并导致无限循环。重命名你的类组件应该可以解决这个问题，通常最好避免在保留字或原始数据/对象类型（数组、对象等）之后命名类或变量，以防止出现意外行为。

【讨论】：