componentWillRecieveProps方法无法正常工作：ReactJS [英] componentWillRecieveProps method is not working properly: ReactJS

问题描述

以下子组件从其父组件接收道具。然后使用 getInitialState 将道具设置为自己的状态，并使用 this.state 将值渲染到相应的输入字段。

The following child component receives props from its parent. It then sets the props to it's own state using getInitialState and renders the value to the corresponding input fields using this.state.

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

I'm using componentWillRecievePropsto update the state of the child component when it receives new props.

最初调用组件时，它可以正常工作。问题发生在它第二次传递道具时，触发道具传递的相应按钮需要两次点击来设置孩子的状态。

Initially when the component is called it works correctly. The issue occurs when it's passed props for a second time, the corresponding button that triggers the props to be passed requires two clicks to set the child's state.

我可能正在使用 componentWillRecieveProps 错误？

I am potentially using componentWillRecieveProps incorrectly?

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;     

推荐答案

我可能错误地使用componentWillRecieveProps？

I am potentially using componentWillRecieveProps incorrectly?

是的，因为你需要使用 props.keyname （将参数传递给此方法传递
），而不是 componentWillReceiveProps this.props c $ c>。

Yes, because you need to use props.keyname (props the parameter passed to this method), instead of this.props in componentWillReceiveProps.

原因是，在此生命周期方法 this.props 在此生命周期方法<$ c之后将具有之前的 props 值而不是新值$ c> this.props 将有新的道具值。

Reason is, inside this lifecycle method this.props will have the previous props values not the new one, after this lifecycle method this.props will have the new props values.

按照 DOC ：

在安装的组件
收到新的道具之前调用componentWillReceiveProps（）。如果你需要更新状态以响应
prop更改（例如，重置它），你可以比较this.props
和nextProps并使用$ b中的this.setState（）执行状态转换$ b这个方法。

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值和新值，在父母的内部，其他一些州的值已被更改，而不是我们传递给子组件的值。

This is because componentWillReceiveProps will get called for each setState inside parent, so before setting the newprops inside child component first we should compare the prev value and new value, may be inside parent some other state value has been changed not the one we are passing to child component.

执行 console.log on this.props 和 newProps 并检查结果。

Do console.log on this.props and the newProps and check the result.

使用此：

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
},

这篇关于componentWillRecieveProps方法无法正常工作：ReactJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！