Javascript 韩元'；刷新页面时不填充字段

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

以下是我的组件：

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}

从“React”导入React；
从'react redux'导入{connect}；
类ReturnForm扩展了React.Component{
建造师（道具）{
超级（道具）；
}
_handleSubmit=（）=>{
...
};
loadParcel=（）=>{
const{dispatch}=this.props；
const{parcel，instance}=this.props.location.query
获取（ActionTypes.Get_包裹管理_详细信息，{PARCEL，instance}）.dispatch（dispatch）
};
componentDidMount（）{
if（Object.keys（this.props.location.query）.length！==0）{
this.loadParcel（）
}
}
renderReference（）{
const{parcelManagementDetails}=this.props；
让customerRef
if（parcelManagementDetails.parcelDetails）{
customerRef=parcelManagementDetails.parcelDetails.customerReference
}
返回(
)
}
render（）{
const{quantity}=this.state；
返回(
...
{this.renderReference（）}
拯救
)
}
静态mapStateToProps=（状态）=>{
const details=state.parcelManagementDetails.parcelManagementDetails | |{}
返回{
ParcelManagement详细信息：详细信息
}
}
}
const ConnectedReturnForm=connect（ReturnForm.mapStateToProps）（ReturnForm）；
导出默认ConnectedReturnForm；
导出{ReturnForm}

---

我做错了什么？

你的意思是当你刷新页面时，api调用返回数据，并且该数据（

customerReference

）可以作为道具使用，但不填充在输入字段中吗？@PrakashSharma是的，这就是我的意思。输入字段上的

defaultValue

看起来只有在初始化时才设置，以后不会更新。我建议您使用

受控的

输入字段。谢谢，有任何链接或示例吗？：）