구성 요소가 ReactJS에서 제어 할 텍스트 유형의 제어되지 않은 입력을 변경하고 있습니다.

 

질문 : 구성 요소가 ReactJS에서 제어 할 텍스트 유형의 제어되지 않은 입력을 변경하고 있습니다.

---

경고 : 구성 요소가 제어 할 텍스트 유형의 제어되지 않은 입력을 변경하고 있습니다. 입력 요소는 제어되지 않음에서 제어 됨으로 (또는 그 반대로) 전환되지 않아야합니다. 구성 요소의 수명 동안 제어되거나 제어되지 않은 입력 요소를 사용할지 여부를 결정합니다. *

다음은 내 코드입니다.

constructor(props) {
  super(props);
  this.state = {
    fields: {},
    errors: {}
  }
  this.onSubmit = this.onSubmit.bind(this);
}

....

onChange(field, e){
  let fields = this.state.fields;
  fields[field] = e.target.value;
  this.setState({fields});
}

....

render() {
  return(
    <div className="form-group">
      <input
        value={this.state.fields["name"]}
        onChange={this.onChange.bind(this, "name")}
        className="form-control"
        type="text"
        refs="name"
        placeholder="Name *"
      />
      <span style={{color: "red"}}>{this.state.errors["name"]}</span>
    </div>
  )
}

답변

---

그 이유는 다음과 같이 정의한 상태입니다.

this.state = { fields: {} }
                                                                                                    

필드를 빈 개체로 사용하므로 처음 렌더링하는 동안 this.state.fields.name 은 undefined 이고 입력 필드의 값은 다음과 같습니다.

value={undefined}
                                                                                                    

이로 인해 입력 필드가 제어되지 않습니다.

입력에 값을 입력하면 fields 가 다음과 같이 변경됩니다.

this.state = { fields: {name: 'xyz'} }
                                                                                                    

그리고 그 때 입력 필드는 제어 된 구성 요소로 변환됩니다. 그래서 오류가 발생합니다.

구성 요소가 제어 할 텍스트 유형의 제어되지 않은 입력을 변경하고 있습니다.

가능한 해결책:

fields 를 다음과 같이 정의하십시오.

this.state = { fields: {name: ''} }
                                                                                                    

2- 또는 다음과 같이 단락 평가 를 사용하여 값 속성을 정의합니다.

value={this.state.fields.name || ''}   // (undefined || '') = ''
                                                                                                    

출처 : https://stackoverflow.com/questions/47012169/a-component-is-changing-an-uncontrolled-input-of-type-text-to-be-controlled-erro