开发者问题收集

React，未捕获的RangeError：超出最大调用堆栈大小

2016-12-19
122276
javascript reactjs

我正在 React 中工作，基本上我想制作一个带有工具提示的按钮，现在我正在制作工具提示。我正在更改 css 显示属性，以便在鼠标进入和离开时使其可见或不可见。但是有一个错误，我不知道该怎么办……

这是我的代码： 

import React from 'react';
import ReactDOM from 'react-dom';
import Style from 'style-it'; 
var Ink = require('react-ink');
import FontIcon from '../FontIcon/FontIcon';

var IconButton = React.createClass({ 

  getInitialState() {
      return {
          iconStyle: "",
          style: "",
          cursorPos: {},
      };
  },

  extend(obj, src) {
      Object.keys(src).forEach(function(key) { obj[key] = src[key]; });
      return obj;
  },

    Tooltip(props) {

        var style = {};

        if (this.tooltipDisplay) {
            style.display = "block";
        } else if (!this.tooltipDisplay) {
            style.display = "none";
        };

        return <div className="tooltip" style={style}>{_props.tooltip}</div>;
    },

    showTooltip(){
        this.tooltipDisplay = true;
    },

    removeTooltip(){
        this.tooltipDisplay = false;
    },

  render() {

    var _props = this.props,
      tooltip = this.Tooltip,
      opts,
      tooltipDisplay = false,
      disabled = false,
      rippleOpacity,
        outterStyleMy = {
        border: "none",
            outline: "none",
            padding: "8px 10px",
        "background-color": "red",
        "border-radius": 100 + "%",
        cursor: "pointer",
        },
        iconStyleMy = {
            "font-size": 12 + "px",
            "text-decoration": "none",
            "text-align": "center",
            display: 'flex',
            'justify-content': 'center',
            'align-items': 'center',
        },
      rippleStyle = {
        color: "rgba(0,0,0,0.5)",
      };

    if (_props.disabled || _props.disableTouchRipple) {
      rippleStyle.opacity = 0;
    };

    this.setState({
      iconStyle: _props.iconStyle
    });

    this.setState({
      style: _props.style
    });

    if (_props.disabled) {
       disabled = true;
    };

    if (this.state.labelStyle) {
        iconStyleMy = this.state.iconStyle;
    };

    if (this.state.style) {
      outterStyleMy = this.state.style;
    };

    if (_props.href) {
      opts.href = _props.href;
    };

        var buttonStyle = this.extend(outterStyleMy, iconStyleMy);

        return(
        <Style>
        {`
          .IconButton{
            position: relative;
          }
          .IconButton:disabled{
            color: ${_props.disabledColor};
          }
          .btnhref{
            text-decoration: none;
          }
        `}
         <a {...opts} className="btnhref" > 
          <tooltip text={this.props.tooltip} position={this.options} />
          <button ref="button" className={"IconButton" + _props.className} disabled={disabled} style={buttonStyle}
          onMouseEnter={this.showTooltip} onMouseLeave={this.removeTooltip} >
            <Ink background={true} style={rippleStyle} opacity={rippleOpacity} />
            <FontIcon className={_props.iconClassName}/>
          </button>
        </a>
        </Style>
        );

  }
});



ReactDOM.render(
 <IconButton href="" className="" iconStyle="" style="" iconClassName="face" disabled="" disableTouchRipple="" tooltip="aaaaa" />,
 document.getElementById('app')
);

在控制台中我收到此错误： 

Uncaught RangeError: Maximum call stack size exceeded
at defineRefPropWarningGetter (App.js:1053)
at Object.ReactElement.createElement (App.js:1220)
at Object.createElement (App.js:3329)
at Constructor.render (App.js:43403)
at App.js:15952
at measureLifeCyclePerf (App.js:15233)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (App.js:15951)
at ReactCompositeComponentWrapper._renderValidatedComponent (App.js:15978)
at ReactCompositeComponentWrapper._updateRenderedComponent (App.js:15902)
at ReactCompositeComponentWrapper._performComponentUpdate (App.js:15880)

我找不到问题所在。我知道这可能是关于调用一个函数，而该函数又调用另一个函数。但我在我的代码中看不到任何类似的东西，我不确定这是否都是关于它的。谢谢帮助 :)

3个回答

问题是您在渲染函数内部调用了 setState 。状态更改应仅因某些更改而发生：用户单击按钮、调整浏览器窗口大小、拍摄照片等。

Never ever ever ever update the state while rendering (repeat that last sentence 20 times and never forget it).

以下是问题代码： 

render () {
    ...
    this.setState({
      iconStyle: _props.iconStyle
    });

    this.setState({
      style: _props.style
    });
    ...
}

上述代码将导致无限循环，因为 setState 会导致调用 render 。由于 iconStyle 和 style 是 props，而 props 无法更改，因此您应该使用这些 props 来构建初始状态。 

getInitialState() {
  return {
      iconStyle: this.props.iconStyle,
      style: this.props.style,
      cursorPos: {},
  };
}

稍后，如果有人点击按钮并且您希望更改 iconStyle，则可以创建一个更新状态的点击处理程序： 

handleClick () {
  this.setState({
    iconStyle: 'clicked'
  });
}

这将导致您的组件重新渲染，并且新状态将得到反映。

将您的“状态”想象成某人正在做饭，我们将拍摄他们做饭的照片。 初始状态 是“鸡蛋打碎： 没有 ，面粉倒出： 没有 ，蔬菜切碎： 没有 ”，然后您拍摄此状态的照片。然后厨师做了一些事情 - 打碎鸡蛋。状态现在已更改，您拍摄了它的照片。然后她切蔬菜。同样，状态已经改变，你拍了一张照片。

类比中的每张照片都代表你的“渲染”功能——特定时间点“状态”的快照。如果每次拍照时面粉都倒出来了，那么我们就必须再拍一张照片，因为面粉刚刚倒出来。再拍一张照片会导致更多的面粉倒出来，所以我们必须再拍一张照片。最终，你会让厨房里到天花板都充满腹腔疾病的噩梦，让房间里的每个人都窒息。你的相机也会用完胶卷或硬盘空间。

Ryan Wheale
2016-12-19

感谢 @RyanWheale，我注意到了我的错误。

在我的渲染函数中，我返回了一个按钮元素，该元素调用了一个改变特定状态的函数。返回的按钮如下所示： 

<button onclick={this.edit()} className="button-primary">Edit</button>

而我的 edit 函数改变了某些状态，如下所示： 

edit: function () {
    this.setState({editing: true});
}

因此，我的错误是，我不小心在 this.edit 后输入了括号。因此，在渲染按钮元素时，实际上调用了编辑函数，从而发生了混乱。现在，当我写

<button onclick={this.edit} className="button-primary">Edit</button>

而不是

<button onclick={this.edit()} className="button-primary">Edit</button>

时，它完美无缺。 我希望我可以帮助某人节省他宝贵的生命时间。

干杯 :)

Filip Savic
2017-05-07

我遇到了同样的问题，我安装了“reactime”扩展程序，该扩展程序导致了这个问题。从我的 chrome 中删除该扩展程序，解决了这个问题。

Sairam Gourishetty
2021-12-15