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

Question

以下子组件从其父组件接收 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;     

Answer 1

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.props 和 newProps 上执行 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
},