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

Question

我有一个顶级 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)

有任何想法吗？谢谢！

Answer 1

因为您命名了反应组件Map，所以该组件正在递归地初始化自身，并导致无限循环。重命名类组件应该可以修复它，并且通常最好避免在保留字或原始数据/对象类型（数组、对象等）之后命名类或变量，以防止意外行为。