[javascript] ReactJS에서 구성 요소가 제어되지 않는 유형의 텍스트 입력을 제어 오류로 변경하고 있습니다.

JAVASCRIPT / 글쓴이

경고 : 구성 요소가 제어 할 텍스트 유형의 제어되지 않은 입력을 변경하고 있습니다. 입력 요소는 제어되지 않은 상태에서 제어 된 상태로 또는 그 반대로 전환해서는 안됩니다. 구성 요소 수명 동안 제어 또는 제어되지 않은 입력 요소 사용 여부를 결정하십시오. *

다음은 내 코드입니다.

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 || '') = ''

답변

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

참고 :

defaultValue초기로드에만 해당됩니다. 를 초기화하려면 input을 사용해야 defaultValue하지만 state값을 변경하는 데 사용하려면을 사용해야 value합니다. 자세한 내용 을 읽으십시오 .

나는 그 경고를 없애기 위해 사용 value={this.state.input ||""}했습니다 input.

답변

구성 요소 내부에 다음과 같은 방법으로 입력 상자를 넣습니다.

<input className="class-name"
              type= "text"
              id="id-123"
              value={ this.state.value || "" }
              name="field-name"
              placeholder="Enter Name"
              />

답변

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

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

답변

허용 된 답변 외에도 또는 input유형을 사용하는 경우 속성 을 null / undefined로 확인해야한다는 것을 알았 습니다.checkboxradiochecked

<input
  id={myId}
  name={myName}
  type="checkbox" // or "radio"
  value={myStateValue || ''}
  checked={someBoolean ? someBoolean : false}
  />

그리고 TS (또는 Babel)를 사용하는 경우 논리 OR 연산자 대신 nullish 병합을 사용할 수 있습니다.

value={myStateValue ?? ''}
checked={someBoolean ?? false}

답변

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

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

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

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

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

답변

const [name, setName] = useState()

텍스트 필드에 입력하자마자 오류가 발생합니다

const [name, setName] = useState('') // <-- by putting in quotes

이 문자열 예제에서 문제를 해결합니다.