ReactJS에서 \'제어되지 않은 입력에서 제어된 입력으로의 전환 오류\'를 방지하는 방법은 무엇입니까?

ReactJS에서 제어되지 않은 입력에서 제어된 입력으로의 전환 오류

React는 제어되지 않는 입력 요소와 제어되는 입력 요소 사이를 전환하는 것에 대해 경고합니다. 이 오류는 일반적으로 입력 필드가 처음에 사용자 입력을 자유롭게(비제어) 수락한 다음 개발자가 나중에 상태(제어)를 통해 해당 값을 제어하려고 시도할 때 발생합니다.

코드 조각:

오류는 다음 코드로 설명됩니다.

<code class="javascript">constructor(props) {
  super(props);
  this.state = {
    fields: {},
    errors: {}
  }
}

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 *"
      />
    </div>
  )
}</code>

근본 원인:

이 코드에서 문제는 필드가 초기 상태에 있습니다. 빈 개체로 초기화됩니다. 구성 요소가 처음 렌더링되면 this.state.fields.name이 정의되지 않아 입력이 제어되지 않는 구성 요소가 됩니다. 그러나 사용자가 값을 입력하면 필드가 업데이트되어 입력이 제어됩니다.

가능한 해결 방법:

이 오류를 해결하려면 다음 두 가지 옵션이 있습니다.

1. 기본값으로 필드 초기화:

   기본값으로 초기 상태의 필드 정의:

   <code class="javascript">this.state = {
     fields: {name: ''}
   }</code>

2. 단락 평가 사용:

   this.state.fields.name이 정의되지 않은 경우 기본값을 제공하려면 value 속성에서 단락 평가를 사용하세요.

   <code class="javascript"><input value={this.state.fields.name || ''} /></code>

위 내용은 ReactJS에서 \'제어되지 않은 입력에서 제어된 입력으로의 전환 오류\'를 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!