javascript - componentWillRecieveProps 方法无法正常工作 : ReactJS

标签 javascript reactjs

以下子组件从其父组件接收 Prop 。然后,它使用 getInitialState 将 props 设置为它自己的状态,并使用 this.state 将值呈现给相应的输入字段。

我正在使用 componentWillRecieveProps 在收到新 Prop 时更新子组件的状态。

最初当组件被调用时它工作正常。第二次传递props时出现该问题,对应的触发传递props的按钮需要点击两次设置child的state。

我可能错误地使用了 componentWillRecieveProps

getInitialState: function() {
  return {
    pitch: this.props.booking.pitch,
    email: this.props.booking.email,
    firstName: this.props.booking.firstName,
    arrivalDate: this.props.booking.arrivalDate,
  }
}, 

componentWillReceiveProps: function (props) {
  this.setState({
    pitch: this.props.booking.pitch,
    email: this.props.booking.email,
    firstName: this.props.booking.firstName,
    arrivalDate: this.props.booking.arrivalDate,
  })
},

完整代码:

var React = require('react');
	var createReactClass = require('create-react-class');
	
	var ViewBooking = createReactClass({
	  getInitialState: function() {
		return {
		  pitch: this.props.booking.pitch,
		  email: this.props.booking.email,
		  firstName: this.props.booking.firstName,
		  arrivalDate: this.props.booking.arrivalDate,
		}
	  }, 
	
	  componentWillReceiveProps: function (props) {
		this.setState({
		  pitch: this.props.booking.pitch,
		  email: this.props.booking.email,
		  firstName: this.props.booking.firstName,
		  arrivalDate: this.props.booking.arrivalDate,
		})
	  },
	 
	  _handleInputChange: function(event) {
		const target = event.target;
		const value = target.type === 'checkbox' ? target.checked : target.value;
		const name = target.name;
		var partialState = {};
		partialState[name] = value;
		console.log(partialState);
		this.setState(partialState);
	  },
	
	  _handleUpdateClose: function(e) {
		this.props.updateClose();
		e.preventDefault();
	  },
	
	  _handleUpdateBooking: function (e) {
		var tempBooking = {
		  pitch: this.state.pitch,
		  email: this.state.email,
		  firstName: this.state.firstName,
		  arrivalDate: this.state.arrivalDate,
		}
		this.props.updateBooking(tempBooking);
		e.preventDefault();
	  },
	
	  _handleDelete: function (e) {
		this.props.deleteBooking();
		e.preventDefault();
	  },
	
	  render: function() { 
		if (this.props.viewFormVisibility) {
				formVisibility = {"display": "block"};  
			} else {
				formVisibility = {"display": "none"};
			}
	
		return (
			<div>
			<form style={formVisibility}>
				<h4>View Booking</h4>
				<div className="form-group row">
				  <label className="col-2 col-form-label">Pitch</label>
				  <div className="col-10">
					<input value={this.state.pitch} onChange={this._handleInputChange} className="form-control" name="pitch" ref="inputPitch" type="number" id="example-number-input"/>
				  </div>
				</div>
			  <div className="form-group row">
				<label  className="col-2 col-form-label">First Name</label>
				<div className="col-10">
				  <input value={this.state.firstName} onChange={this._handleInputChange} className="form-control" ref="firstName" name="firstName" type="text" id="example-text-input"/>
				</div>
			  </div>
			  <div className="form-group row">
				<label className="col-2 col-form-label">Email</label>
				<div className="col-10">
				  <input value={this.state.email} onChange={this._handleInputChange} className="form-control" ref="inputEmail" type="email"  name="email" id="example-email-input"/>
				</div>
			  </div>
			  
			  <div className="form-group row">
				<label className="col-2 col-form-label">Date</label>
				<div className="col-10">
				  <input value={this.state.arrivalDate} onChange={this._handleInputChange} className="form-control" ref="arrivalDate" name="arrivalDate" type="date" id="example-date-input"/>
				</div>
			  </div>
			  <button type="submit" className="btn btn-primary" onClick={this._handleUpdateBooking}>Save changes</button>
			  <button className="btn btn-danger" onClick={this._handleUpdateClose}>Close</button>
			  <button onClick={this._handleDelete} className="btn btn-danger">Delete</button>
			</form>
		  </div>
		)
	  }
	})
	 
	module.exports = ViewBooking;     

最佳答案

I am potentially using componentWillRecieveProps incorrectly?

是的,因为你需要使用props.keyname(props传递的参数 到此方法),而不是 componentWillReceiveProps 中的 this.props

原因是,在这个 lifecycle 方法中,this.props 将具有之前的 props 值,而不是这个 之后的新值lifecycle 方法 this.props 将具有新的 props 值。

根据 DOC :

componentWillReceiveProps() is invoked before a mounted component receives new props. If you need to update the state in response to prop changes (for example, to reset it), you may compare this.props and nextProps and perform state transitions using this.setState() in this method.

这是因为 componentWillReceiveProps 将在父组件内为每个 setState 调用,所以在设置子组件内的 newprops 之前,我们首先应该比较prev 值和新值,可能在父级内部一些其他 state 值已更改,而不是我们传递给子组件的值。

this.propsnewProps 上执行 console.log 并检查结果。

使用这个:

componentWillReceiveProps: function (newProps) {
    this.setState({
        pitch: newProps.booking.pitch,
        email: newProps.booking.email,
        firstName: newProps.booking.firstName,
        arrivalDate: newProps.booking.arrivalDate,
    })
    console.log('previous value', this.props);    //print the previous values
    console.log('new values', newProps);          //new values
},

关于javascript - componentWillRecieveProps 方法无法正常工作 : ReactJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44725136/

相关文章:

javascript - 模态不打印包含的内容

javascript - Chrome 扩展/Bootstrap native 函数未定义? (Javascript)

javascript - javascript 中明天的演出日期

javascript - 如何从 Xpath 中隔离可在 document.querySelector 中使用的选择器?

javascript - React + Meteor + Bootstrap Modal 管理数据

javascript - Github 页面网站不反射(reflect)本地主机的行为

javascript - 如何在 Jest 测试中为无状态函数的输入文本元素设置值

javascript - github 中的 Codacy 功能给了我一些我无法理解的错误

javascript parseInt() 仅转换前两个字符

javascript - 如何在构造函数中初始化依赖于另一个方法值的状态方法