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

그리고 그 당시 입력 필드가 제어 된 구성 요소로 변환되므로 오류가 발생하는 이유는 다음과 같습니다.

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

가능한 해결책:

1- fields상태를 다음과 같이 정의하십시오 .

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

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

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

---

현재 상태를 먼저 설정 ...this.state

새 상태를 할당하려고 할 때 정의되지 않을 수 있기 때문입니다. 상태 추출 현재 상태를 설정하여 고정됩니다.

this.setState({...this.state, field})

상태에 객체가있는 경우 다음과 같이 상태를 설정해야합니다. 사용자 객체 내부에 사용자 이름을 설정해야한다고 가정합니다.

this.setState({user:{...this.state.user, ['username']: username}})

---

간단하게, 초기 상태를 먼저 설정해야합니다

초기 상태를 설정하지 않으면 react가 제어되지 않는 구성 요소 로 취급합니다.

---

변경 value하려면 defaultValue그것을 해결됩니다.

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