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

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

最初，调用该组件时，它可以正常工作。问题是第二次通过道具时发生的，触发道具通过的相应按钮需要两次单击才能设置孩子的状态。

我可能使用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;