刷新页面时，Reactjs属性不会填充字段

Question

我有一个连接的React组件，该组件接受查询字符串值并进行API调用。然后，在将状态映射到道具后，它会用道具之一填充输入字段。当我在包含查询字符串的链接后面的页面上登陆时，它工作正常，但是如果我刷新页面，则不会填充输入字段，但是状态树中的数据仍然存在，道具也是如此。 / p>

这是我的组成部分：

import React from 'react';
import { connect } from 'react-redux';

class ReturnForm extends React.Component {

  constructor(props){
    super(props);
  }

  _handleSubmit = () => {
    ...
  };

  loadParcel = () => {
    const { dispatch } = this.props;
    const { parcel, instance } = this.props.location.query

    Api.Get(ActionTypes.GET_PARCEL_MANAGEMENT_DETAILS, {parcel, instance}).dispatch(dispatch)
  };

  componentDidMount() {
    if(Object.keys(this.props.location.query).length !== 0) {
      this.loadParcel()
    }
  }

  renderReference() {

    const { parcelManagementDetails } = this.props;
    let customerRef

    if(parcelManagementDetails.parcelDetails) {
      customerRef = parcelManagementDetails.parcelDetails.customerReference
    }

    return (
      <div className="input-group">
        <input type="text" defaultValue={customerRef}>
      </div>
    )
  }

  render() {

    const { quantity } = this.state;

    return(
      <div className="form new-return-form">

        <form onSubmit={this._handleSubmit}>
            ...

            <div className="input-section-inner">
                {this.renderReference()}
            </div>

            <div className="button-group">
              <button
                id="addReturnButton"
                type="submit"
                model="local"
                className="btn btn-primary">
                Save
              </button>
            </div>
        </form>
      </div>
    )
  }

  static mapStateToProps = (state) => {
    const details =  state.parcelManagementDetails.parcelManagementDetails || {}
    return {
      parcelManagementDetails: details
    }
  }

}


const ConnectedReturnForm = connect(ReturnForm.mapStateToProps)(ReturnForm);
export default ConnectedReturnForm;
export {ReturnForm}

我在做什么错了？