ReactJS更改父样式导致RangeError：超出最大调用堆栈大小

Question

当我尝试根据子组件中的某些逻辑更改父样式时，我收到此错误。

RangeError：超出最大调用堆栈大小。

我已经尝试过调用来更改componentWillUpdate和componentShouldUpdate中的父级以及其他生命周期事件，但它似乎并不想工作。

这是一个jsbin来看看发生了什么。在幻灯片的末尾，背景应该变为白色，但它也会抛出错误并导致应用停止工作。

https://jsbin.com/mahocuq/edit?html,js,console,output

    componentWillUpdate() {
    if(this.props.slideNum === 2){
        this.changeStyle("#fff")
    }
    console.log(this.props.slideNum);
}

Answer 1

您的情况表明，在更新时，如果您使用第二张幻灯片，则会触发对父级的更新。

更新父级时，会将道具传递给子级并触发更新。你正在创造一个无限循环。

您可能希望传递背景颜色，以便验证它是您所期望的，并且您不需要任何进一步的更新。相当未经测试但这样的事情应该有效：

<Slides
    currentBackgroundColor={this.state.backgroundColor}
    ChangeParentStyle={this.ChangeParentStyle.bind(this)}
    slideNum={this.state.slideNum}
/>

...
class Slides extends React.Component {
    componentWillUpdate() {
        if(this.props.slideNum === 2 && this.props.currentBackgroundColor !== `#fff`){
            this.props.ChangeParentStyle(`#fff`);
        }
    }