以下子组件从其父组件接收 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.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
},
关于javascript - componentWillRecieveProps 方法无法正常工作 : ReactJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44725136/