码迷,mamicode.com
首页 > 其他好文 > 详细

props设置state误区

时间:2018-09-09 11:51:30      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:nbsp   完美解决   style   赋值   变化   stat   receive   创建   val   

class Component extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: this.props.value };
  }
  
  render() {
    return <div>The value is: {this.state.value}</div>
  }
}

如上代码所示,仅仅在constructor中将props赋值给state,constructor仅在组件创建时执行一次,props发生变化不会执行,因此,render中的value仅显示初始值,

不会发生变化

如下,在constructor和componentWillReceiveProps都进行props的赋值,才可以完美解决props设置state的问题:

class Component extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: this.props.value };
  }
  componentWillReceiveProps(nextProps) {
    if(nextProps.value !== this.props.value) {
      this.setState({value: nextProps.value});
    }
  }
  render() {
    return <div>The value is: {this.state.value}</div>
  }
}

 

 

出处:https://segmentfault.com/a/1190000015606509

props设置state误区

标签:nbsp   完美解决   style   赋值   变化   stat   receive   创建   val   

原文地址:https://www.cnblogs.com/mengff/p/9611838.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!