반응 - 일부 입력에 대해 "input"의 "value" 프로포트가 null일 수 없습니다.

반응 - 일부 입력에 대해 "input"의 "value" 프로포트가 null일 수 없습니다.

내 React 앱(버전 15.5.4)에서 구성 요소 중 하나의 입력 필드에 대해 다음과 같은 경고가 표시됩니다.

Warning: 'value' prop on 'input' should not be null. Consider using the empty string to clear the component or 'undefined' for uncontrolled components.

다음 jsx를 참조합니다.

<label>Description<br />
    <input
        type="text"
        name="description"
        value={this.state.group.description}
        onChange={this.handleChange}
        maxLength="99" />
</label>

하지만 나는 이것에 대해 당혹스럽다. 왜냐하면 그 가치는this.state.group.description로 설정되어 있다.""내 컨스트럭터에서:

this.state = {
    "group": {
        "name": "",
        "description": ""
    }
}

그리고 나의 경악은 또 다른 입력 필드가this.state.group.name그러나 경고는 발생하지 않습니다.

<label>Name *<br />
    <input
        type="text"
        name="name"
        value={this.state.group.name}
        onChange={this.handleChange}
        maxLength="99"
        required="required"
        autoFocus />
</label>

내가 뭘 빠트렸나요?제가 알기로는 이 두 값의 초기 상태를 빈 문자열로 설정하고 두 입력 필드에서 동일한 방식으로 참조했지만 하나는 경고를 발생시키고 다른 하나는 그렇지 않습니다.

세상의 종말이 아니라...앱은 정상적으로 동작하지만, 왜 이런 일이 일어나는지 이해하고 앱을 깨끗하게 실행하고 싶습니다.

여기 있습니다.handleChange:

handleChange(event) {
    const attribute = event.target.name
    const updatedGroup = this.state.group
    updatedGroup[attribute] = event.target.value
    this.setState({"group": updatedGroup})
}

@ShubhamKhatri와 @Dekel 덕분에 컨스트럭터에 설정된 빈 문자열이 문제가 있는 값으로 덮어쓰고 있다는 사실조차 생각하지 못했습니다.문제의 근원은 의 가치를 설정한 후description빈 문자열로 API가 덮어쓰고 있었습니다.null.

이 문제를 해결하려면render다음과 같은 방법:

let groupDescription;

if (!this.state.group.description) {
    groupDescription = ""
} else {
    groupDescription = this.state.group.description
}

return (
    <label>Description<br />
        <input
            type="text"
            name="description"
            value={groupDescription}
            onChange={this.handleChange}
            maxLength="99" />
    </label>
)

값이 null일 경우 동일한 오류를 통해 15가 반응합니다.따라서 경고 없이 react js 코드를 실행하려면 입력의 기본 소품 '값'은 빈 문자열이어야 합니다.

<input type="text" value={value == null ? '' : value}/>;

문제는 handleChange 함수에 있습니다.이 함수는 상태를 직접 뮤트하고 있습니다.

const updatedGroup = this.state.group
updatedGroup[attribute] = event.target.value 

그룹 개체의 복제를 수행하는 데 사용합니다.

handleChange(event) {
    const attribute = event.target.name
    const updatedGroup = [...this.state.group]
    updatedGroup[attribute] = event.target.value
    this.setState({"group": updatedGroup})
}

이 에러는 onChange 이벤트핸들러를 아직 추가하지 않았을 때 표시됩니다.select요소.

onChange 이벤트를 추가하기 전에 요소가 어떻게 보이는지 알아보기 위해 초기 테스트를 수행했을 뿐입니다.불행히도, 나는 이 문제를 해결하기 위해 너무 많은 시간을 소비했다.한 가지 확실한 것은 왜 그것이 그것을 로 보고하는가 하는 것이다.null보다는""onChange 이벤트가 지정되지 않은 경우.

언급URL : https://stackoverflow.com/questions/45720804/react-value-prop-on-input-should-not-be-null-for-some-input-but-not-othe