React，Uncaught RangeError：超出最大调用堆栈大小 [英] React, Uncaught RangeError: Maximum call stack size exceeded
问题描述
我正在做出反应，基本上我想用工具提示制作一个按钮，现在我正在制作工具提示。我正在更改css显示属性，以便在鼠标进入和离开期间使其可见或不可见。但是有一个错误，我不知道该怎么办...
这是我的代码：
< pre class =lang-js prettyprint-override>
import来自'react'的React;
从'react-dom'导入ReactDOM;
从'style-it'导入样式;
var Ink = require（'react-ink'）;
从'../FontIcon/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;
};
返回< div className =tooltipstyle = {style}> {_ props.tooltip}< / div> ;;
}，
showTooltip（）{
this.tooltipDisplay = true;
}，
removeTooltip（）{
this.tooltipDisplay = false;
}，
render（）{
var _props = this.props，
tooltip = this。工具提示，
opts，
tooltipDisplay = false，
disabled = false，
rippleOpacity，
outterStyleMy = {
border：none，
outline：none ，
填充：8px 10px，
background-color：red，
border-radius：100 +％，
光标：指针，
}，
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）;
返回（
< Style>
{`
.IconButton {
position：relative;
}
.IconButton ：禁用{
color：$ {_ props.disabledColor};
}
.btnhref {
text-decoration：none;
}
`}
< a {... opts} className =btnhref>
< tooltip text = {this.props.tooltip} position = {this.options} />
< ; button ref =buttonclassName = {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 =facedisabled = disableTouchRipple =tooltip =aaaaa/> ;,
document.getElementById（'app'）
）;
在控制台中我收到此错误：
未捕获的RangeError：最大调用堆栈大小超过
在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）
我找不到有什么问题。我知道这可能是调用一个函数，而函数又调用另一个函数。但是在我的代码中我看不到这样的东西，我不确定它是否都是关于它的。感谢您的帮助：）
每当看到调用 setState 的代码时从一个渲染函数中，它应该唤起与人类蜈蚣电影相同的情感类型。状态更改应该只是因为某些更改而发生：用户单击按钮，浏览器窗口调整大小，拍照等等。
这是问题所在代码：
render（）{
...
this.setState（{
iconStyle：_props.iconStyle
}）;
this.setState（{
style：_props.style
}）;
...
}
[呕吐在我嘴里]
以上代码会导致无限循环排序，因为 setState 导致渲染被召唤。由于 iconStyle 和 style 是道具，而道具无法改变，你应该使用这些道具来建立你的初始状态。 / p>
getInitialState（）{
return {
iconStyle：this.props.iconStyle，
style ：this.props.style，
cursorPos：{}，
};
}
稍后，如果有人点击按钮并且您想要更改iconStyle，那么会创建一个更新你的状态的点击处理程序：
handleClick（）{
this.setState（{
iconStyle：'clicked'
}）;
}
这将导致您的组件被重新呈现并且新状态将被反映出来。
将您的州视为烹饪的人，我们将拍摄他们烹饪的照片。 初始状态是鸡蛋破裂：没有，面粉倾倒：没有，蔬菜切碎：没有，以及你拍了这个州的照片。然后厨师做了一些事 - 打破鸡蛋。国家现在已经改变了，你拍了一张照片。然后她切蔬菜。再次，状态已经改变，你拍了一张照片。
类比中的每张照片代表你的渲染功能 - 特定点的状态快照及时。如果你每次拍照都面粉倒了，那么我们就不得不拍另一张照片，因为面粉只是倒了。拍摄另一张照片会导致更多的面粉倒入，所以我们不得不拍另一张照片。最后，你会把厨房塞进天花板，带着乳糜泻的噩梦，让房间里的每个人都窒息。您的相机也会耗尽胶片或硬盘空间。
I'm working in react and basically I want to make an button with tooltip, right now I'm making tooltip. I'm changing css display property in order to make it visible or not during mouse enter and leave. But there is an error and I don't know what to do...
Here is my code:
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')
);
In console I'm getting this error:
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)
I can't find out what's wrong. I know it might be something about calling a function which in turn calls another function. But I can't see anything like this in my code and I'm not sure if it's all about it. Thanks for help :)
Whenever you see code which calls setState from inside a render function, it should evoke the same type of emotions as the human centipede movie. State changes should only happen as a result of something changing: user clicked on a button, the browser window was resized, a picture was taken, etc.
Here is the problem code:
render () {
...
this.setState({
iconStyle: _props.iconStyle
});
this.setState({
style: _props.style
});
...
}
[vomit in my mouth]
The above code would cause an infinite loop of sorts because setState causes render to be called. Since iconStyle and style are props, and props cannot change, you should use those props to build your initial state.
getInitialState() {
return {
iconStyle: this.props.iconStyle,
style: this.props.style,
cursorPos: {},
};
}
Later, if someone clicks a button and you want the iconStyle to change, you would create a click handler which updates your state:
handleClick () {
this.setState({
iconStyle: 'clicked'
});
}
This would cause your component to be rerendered and the new state would be reflected.
Think of your "state" as someone cooking and we are going to take photographs of them cooking. The initial state is "eggs cracked: no, flour poured: no, veggies chopped: no", and you take a picture of this state. Then the chef does something - cracks the eggs. The state has now changed, and you take a picture of it. Then she cuts the veggies. Again, the state has changed and you take a picture.
Each photograph in the analogy represents your "render" function - a snapshot of the "state" at a particular point in time. If every time you took a photograph the flour got poured, well we would have to take another picture because the flour was just poured. Taking another picture would cause more flour to get poured so we'd have to take another picture. Eventually you'd fill the kitchen to the ceiling with a celiac's nightmare and suffocate everybody in the room. You'd also run out of film or hard disk space on your camera.
这篇关于React，Uncaught RangeError：超出最大调用堆栈大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
