Javascript React：如何在Ajax组件中设置默认值

我尝试创建表单来编辑现有值。问题是来自ajax请求的初始数据，结果我的组件被渲染两次：第一次是空值，第二次是数据出现时。 目前，我的代码没有将接收到的数据放入表单中。如何将从表单中的ajax请求获得的数据设置为init数据，并在此表单中进一步编辑

负责表单输入的我的组件：

export default class FormInputField extends React.Component{

constructor(props) {
    super(props);
    this.state = {
        value : constants.EMPTY_FIELD,
        errorDisplay : constants.DISPLAY_NONE,
        errorMessage : constants.MESSAGE_DEFAULT_ERROR,
    }
    this.validation = this.validation.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.handleBlur = this.handleBlur.bind(this);
}

handleChange(e){
    let valid = this.validation(e.target.value);
    if (this.props.onChange){
        this.props.onChange(e, valid)
    }
}

validation(value){
    //some validation        
    this.setState({
        value : value,
        errorDisplay : errorDisplay,
        errorMessage : errorMessage
    })
    return valid;
}

handleBlur(e) {
    this.validation(e.target.value.trim());
}

    render(){
    return(
        <div className="form-group">
            <label htmlFor = {this.props.name}>{this.props.title}</label>
            <div className="col-sm-10">

                <input name={this.props.name}
                       type="text" className="form-control"
                       id={this.props.name}
                       placeholder={this.props.placeholder}
                       value={this.state.value}
                       onChange={this.handleChange}
                       onBlur={this.handleBlur}
                />
            </div>
        </div>
    )
}
}

默认值来自相同的

Parant

状态，通过这种方式设置：

 constructor(props) {
    super(props);
    this.state = {
        name        :  {value : constants.EMPTY_FIELD, isValid : false}
        isCarWashDownload : false
    };
    this.setCarWashInForm = this.setCarWashInForm.bind(this);
}

componentDidMount(){
    if (!this.state.isCarWashDownload){
        let link = "/carwash/"+this.props.carWashId;
        this.serverRequest = $.get(link, function (result) {
            this.setCarWashInForm(result);
        }.bind(this));
    }

};

setCarWashInForm(carWash){
    this.setState({
        name : {value : carWash.name, isValid:true},
        isCarWashDownload : true
    })

}

---

由于ajax调用是异步的，因此您有两个选项：

您有标准默认值，直到日期返回并被覆盖为止

当ajax调用最初发生时，您实际上并不呈现表单，一旦调用完成，您将使用该数据呈现表单

取决于表单的位置和您想要的内容，您的用户体验将是考虑这两种方法的主要因素。p>

---

您现在体验到的是，一旦ajax调用完成，组件将更新其状态，然后重新渲染，ajax调用将停止，react将跳过渲染函数并在ajax调用完成之前渲染表单

子组件当父组件更改其道具时，组件将重新渲染，因此在初始数据上以及在ajax调用响应回调中的

设置状态

之后，在子组件和父组件中运行两次渲染（因为父组件中的状态属性设置为子组件的道具）。通过在父类的render方法中执行simple

if

，可以避免渲染子组件

render(){

    let input=null; //or some loading component to show that something is going on

    if (this.ajaxEnded) //example variable which should be changed on true when data is loaded from ajax call
    input=<FormInputField
                title = "Name*:"
                placeholder = "Name"
                name = "name"
                onChange = {this.handleNameChange}
                required = {true}
                maxLength = {50}
                validation = {this.validationName}
                errorMessage = "Error"
                defaultValue = {this.state.name.value}
            />      

   return(

     <div style={mainFormStyle}>
        <form onSubmit={this.handleSubmit} id="addCarWashForm">
        {input}
        </form>
     </div>

  );

 }

render（）{
让input=null；//或某个正在加载的组件来显示正在进行的操作
if（this.ajaxend）//当从ajax调用加载数据时，应在true上更改的示例变量
输入=
返回(
{input}
);
}

---

因此，我们在first

render

中不显示任何内容或加载，在ajax调用中，我们设置了一些变量，表示数据被加载为布尔值true，第二个

render

调用显示了所需的最终子组件。

您能否解释如何在ajax请求完成之前阻止渲染？因此，我将有一个默认状态loading=true，然后在你的渲染方法中，只要有一个

if（loading）{return}else{return}

，然后有一些你想放在那里的加载组件，或者你可以让它返回

null

，然后在数据返回之前它不会显示任何内容。谢谢你的帮助。它是有用的，但我接受另一个答案，因为它有一个更清楚的例子，我认为它将是有用的休息使用

render(){

    let input=null; //or some loading component to show that something is going on

    if (this.ajaxEnded) //example variable which should be changed on true when data is loaded from ajax call
    input=<FormInputField
                title = "Name*:"
                placeholder = "Name"
                name = "name"
                onChange = {this.handleNameChange}
                required = {true}
                maxLength = {50}
                validation = {this.validationName}
                errorMessage = "Error"
                defaultValue = {this.state.name.value}
            />      

   return(

     <div style={mainFormStyle}>
        <form onSubmit={this.handleSubmit} id="addCarWashForm">
        {input}
        </form>
     </div>

  );

 }