Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.9k views
in Technique[技术] by (71.8m points)

React 出现Cannot add property zIndex, object is not extensible

为什么在render中使用变量,会却出现了对象不可扩展。

首先,定义变量。(以下步骤全在class内部执行)

boxOpenStyle={};

然后,在方法open中去增加一个属性。

open(){
    this.boxOpenStyle.zIndex=9;
    this.setState({visible:true});
}

在方法close中对该变量重新赋值。

close(){
    this.boxOpenStyle.zIndex=8;
    this.setState({visible:false});
}

最后,render中使用该变量。

render(){
    return (
        <div style={this.state.visible ? this.boxOpenStyle:{}}></div>
    );
}

最后出现结果是:

   1.当执行open方法时,程序正常运行。
   2.当close方法被执行时,程序出错,告知对象只读,不可重新赋值。

如下图:
image.png

就算将boxOpenStyle放在state里面去改变,仍然会出现这样的错误。
但是如果将style变成id或className:

<div id={this.state.visible ? this.boxOpenStyle:{}}></div>
或
<div className={this.state.visible ? this.boxOpenStyle:{}}></div>

就不会出现这样的错误。
所以,请问这是react的什么机制触发了只读和不可扩展属性?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

为了避免一些错误,react内部冻结了元素的很多内容,意思就是让你尽量使用setState来更改数据。

执行open方法时,boxOpenStyle还没冻结,close的时候元素创建完成,对象已经被冻结,再更改属性抛出错误

image.png


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...