React: как установить значение по умолчанию в компоненте из Ajax

Question

Я пытаюсь создать форму для редактирования существующего значения. Проблема заключается в исходных данных, которые поступают из запроса ajax, и в результате мой компонент дважды считывается: сначала с пустыми значениями и секундой, когда поступают данные. Currenly мой код не помещает полученные данные в форму. Как я могу установить полученные данные из ajax-запроса в форме как данные инициализации, по-видимому, отредактировать в дальнейшем в этой форме?

Мой компонент, который отвечает за ввод в виде:

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> 
    ) 
} 
} 

Этот компонент образуют ПОЗВОНИТЕ Parent компонент по следующим образом:

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

       <FormInputField 
        title = "Name*:" 
        placeholder = "Name" 
        name = "name" 
        onChange = {this.handleNameChange} 
        required = {true} 
        maxLength = {50} 
        validation = {this.validationName} 
        errorMessage = "Error" 
        defaultValue = {this.state.name.value} 
       /> 

и значение по умолчанию происходит от того же 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 
    }) 

} 

Answer 1

Дети компонент перерисовка, когда его реквизита изменение на Родитель компонента, поэтому делают у детей и родительской перспективе в два раза, по исходным данным, а также после того, как setState в Ajax обратного вызова ответа вызова (потому что состояние свойства в Родитель установлены как реквизит детей). Вы можете избежать рендеринга компонента «Дети», выполнив простой метод 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, в Ajax вызова мы устанавливаем некоторые переменный, представляющие эти данные были загружен, как логические истинны и второй render показывает вызов хотели окончательные ребенок компонента.

Answer 2

Поскольку вызов ajax является асинхронным, у вас есть несколько вариантов:

1. У вас есть стандартные значения по умолчанию, которые отображаются до тех пор, пока дата не вернется, а те, которые будут переопределены.
2. Хотя вызов ajax происходит первоначально, вы фактически не визуализируете форму, и по завершении вызова вы визуализируете форму с этими данными.

В зависимости от того, где находится форма, и что вы хотите, чтобы ваш пользовательский опыт был основным фактором, который должен учитывать любой из них.

Что вы сейчас переживаете, так это то, что вызов ajax выходит из строя, реагирует на функцию рендеринга и передает форму перед завершением вызова ajax после того, как он завершает обновление компонента, а затем редерты.