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 类中的共享回调处理程序

javascript - 如何将 JavaScript 对象扁平化为类似菊花链的形式?

javascript - 如何在 react 中悬停时在图像上添加过渡时间?

javascript - react native : Can't style the Button

reactjs - 如何使用 yup.addMethod() 为国家/地区名称和代码编写自定义架构验证?

javascript - 如何在变量中收集HTML页面的所有脚本标签

javascript - d3 中带有 slider 的 map 数据示例

javascript - 如何将数据传递给 props.children?

javascript - 为什么不能在 <Image source={}/> 中使用字符串变量? ( native react )

javascript - 使用 jquery/php 从下拉列表中获取即时结果