반작용 : 36 경고 : 검색 창은 변화 요소가 나는 다음과 같은 오류를 받고 있어요하지만</p> <p>warning.js을 일어나는 이유를 확인할 수 없었던

Question

조절되지 않는 것으로 텍스트를 입력의 제어 입력을 변화 컨트롤되지 않는 텍스트 형식의 제어 입력. 입력 요소가 제어 대상에서 제어 대상으로 전환되어서는 안됩니다 (또는 그 반대). 구성 요소의 수명에 대한 제어 또는 조절되지 않는 입력 요소를 사용하여 사이에 결정

I했습니다 다음 파일을 가지고 : Searchbox.js

import React, { Component } from 'react'; 
 
    
 
    class Searchbox extends Component { 
 
    
 
     // render method 
 
     render() { 
 
     const { value, onChange, onSubmit, children } = this.props 
 
     console.log(value) 
 
     console.log(onChange) 
 
     console.log(onSubmit) 
 
     console.log(children) 
 
     return (
 
      <section className="search-section"> 
 
      <form onSubmit={onSubmit}> 
 
       <input 
 
       type="text" 
 
       className="search-box" 
 
       value={value} 
 
       onChange={onChange} 
 
       /> 
 
       <button type="submit">{children}</button> 
 
      </form> 
 
      </section> 
 
     ) 
 
     } 
 
    } 
 
    
 
    export default Searchbox

1. 그리고 App.js 파일

   에

   import React, { Component } from 'react'; 
    
   import Searchbox from './components/Searchbox' 
    
   //import logo from './logo.svg'; 
    
   import './App.css'; 
    
   
    
   const DEFAULT_TERM = 'High Fidelity' 
    
   
    
   class App extends Component { 
    
   
    
       // Constructor 
    
       constructor(props) { 
    
       super(props) 
    
   
    
       this.state = { 
    
        movie: null, 
    
        searchTerm: DEFAULT_TERM 
    
       } 
    
   
    
       this.onSearchSubmit = this.onSearchSubmit.bind(this) 
    
       this.onSearchChange = this.onSearchChange.bind(this) 
    
       } 
    
   
    
   
    
       // onSearchSubmit method 
    
       onSearchSubmit(e) { 
    
       e.preventDefault() 
    
       console.log("Searching movie with name" + this.status.searchTerm) 
    
       } 
    
   
    
       onSearchChange(e){ 
    
       console.log(event.target.value) 
    
       this.setState({ searchTerm: event.target.value }) 
    
       } 
    
   
    
       // render method 
    
       render() { 
    
   
    
       const { movie, searchTerm } = this.state 
    
   
    
       return (
    
        <div className="App"> 
    
        <Searchbox 
    
         value={searchTerm} 
    
         onChange={this.onSearchChange} 
    
         onSubmit={this.onSearchSubmit} 
    
        >Search 
    
        </Searchbox> 
    
        </div> 
    
       ); 
    
       } 
    
   } 
    
   
    
   export default App;

   부하 모든 것이 내가 텍스트 필드에 뭔가를 입력 할 때 좋은,하지만 오류가 트리거됩니다.

   제안 사항?

Answer 1

문제는 onSearchChange 기능에 있습니다. 당신은 전자로 입력의 OnChange 이벤트라는 이름의 한하지만 당신은

이 onSearchChange가 아래에 언급 된 코드 바꾸기 전역 변수 이벤트에서 값을 복용 :

onSearchChange(event) { 
    this.setState({ searchTerm: event.target.value }) 
} 

Answer 2

나는 똑같은 경고를 수신했다. 내 TextFieldItem은 해당 소품을 통해 업데이트되는 하위 구성 요소입니다. 다음 줄이 범인이었다.

const fieldValue = (field.Value == null) ? undefined : field.Value; 

줄을 변경하면 값이 undefined에서 '해결 된 경고'로 설정됩니다.

const fieldValue = (field.Value == null) ? '' : field.Value; 

구성 요소에게 나를 위해 잘 작동

class TextFieldItem extends React.Component{ 
     constructor(props){ 
      super(props); 
      this.onChange=this.onChange.bind(this); 
     } 
     onChange(e){ 
      event.preventDefault(); 
      const {onFieldChange,field} = this.props; 
      onFieldChange(e.target.id, e.target.value, e.target.name,field.Type); 
     } 
     render(){   
      const {field, onFieldChange, onRecordUpdate, IsLookupField,record,currentDocumentType} = this.props;  
      const fieldValue = (field.Value == null) ? '' : field.Value; 
      return (
       <div> 
        <label>{field.Name}</label> 
        <input type="text" key={field.Id} className="form-control" id={field.Id} name={field.Name} onChange={this.onChange} value={fieldValue} />  
        {IsLookupField && <LookupFieldItem record={record} field={field} onRecordUpdate={onRecordUpdate} documentType={currentDocumentType} /> } 
       </div> 
       ); 
     } 
    } 
     export default TextFieldItem;