在一次写react项目中,报出如下警告,如图:
意思大概为:在一次改变state或者props值后,触发render()方法执行,重新渲染DOM的过程中,react不允许再有其他的state或者props值的改变。render()方法必须是纯函数!!!。我的理解就是:在render()方法中不能再有其他改变state或者prop的操作
我当时写的代码如下:
handleClick = () => {
this.props.increateCount(++this.perAdd);
}
affectRenderFun = () => {
this.setState({
affectRender: 'hahah'
})
}
render() {
const { num } = this.props;
return (
<div>
<span>{num}</span>
<div>{this.affectRenderFun()}</div>
<button onClick={ this.handleClick }>+</button>
</div>
);
}
因此,最好将this.affectRenderFun()
写在点击事件的处理程序中,即handClick()
中