Question

Material-UI：未捕获的 RangeError：超出最大调用堆栈大小

2019-01-10

17305

javascript reactjs material-ui

我正在使用 Material-UI 和 React 中的 Dialog 和 Select 组件。

仅举一个例子：

import React from 'react';
import { Dialog, MenuItem, Select } from '@material-ui/core';

class SomeComponent extends React.PureComponent {

  render() {
    return (
      <Dialog>
        <Select
          value={this.state.age}
          onChange={this.handleChange}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
        </Select>
      </Dialog>
    );
  }

}

单击选择后，我从 Modal.js 收到此错误：

"Uncaught RangeError: Maximum call stack size exceeded. at HTMLDocument.Modal._this.enforceFocus (Modal.js?86a5:197)"

有什么想法吗？

Answer 1

将 disableEnforceFocus 属性添加到 Dialog 组件。

参考： issues/10341

更新 03/2023：

来自文档：

Generally this should never be set to true as it makes the modal less accessible to assistive technologies, like screen readers.

可能需要按照建议添加 disablePortal 这里

import React from 'react';
import { Dialog, MenuItem, Select } from '@material-ui/core';

class SomeComponent extends React.PureComponent {

  render() {
    return (
      <Dialog
        disableEnforceFocus
      >
        <Select
          value={this.state.age}
          onChange={this.handleChange}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
        </Select>
      </Dialog>
    );
  }

}

Answer 2

在 mui v4 中，您可以使用 disableEnforceFocus ，请查看文档

Alessander França

2022-10-12