반응 있음 정의되지 않은 'setState'속성을 읽을 수 없음

Question

내 문제는 입력 할 때이 오류가 발생합니다. 누구든지 나를 도울 수 있습니까? THX (내가 BTW 반응에 새로 온 사람)

class Searcher extends Component { 
     constructor(props) { 
     super(props) 

     this.state = { 
      inputValue: '' 
     } 
     } 

     onChange (e) { 
     console.log(e) 
     this.setState({ 
      inputValue: e.target.value 
     }) 
     } 
     render() { 
     return (
      <SearchBar> 
      <SearchInput placeholder="Nunca pares de buscar" value={this.state.inputValue} onChange={this.onChange}/> 
      <SearchContainer> 
       <Search> 
       <i className="fa fa-search" aria-hidden="true"> 
       </i> 
       </Search> 
      </SearchContainer> 
      </SearchBar> 
     ) 
     } 
    } 

Answer 1

createClass과는 달리, 구성 요소 (ES6 클래스)의 경우 React autobind autobind는 this입니다. 그러므로 당신은 당신 스스로 방법을 구속해야합니다.

constructor(props) { 
    super(props); 
    this.state = { inputValue: '' }; 
    this.onChange = this.onChange.bind(this); 
} 

DEMO

그것은 오히려 렌더링 (일부 코드가 표시됩니다으로) 때문에이보다 여기 그것을하는 것이 좋습니다 : 지금까지 가장 일반적인 방법은 생성자의 방법을 결합하는 것입니다 바인딩 된 함수는 한 번만 생성됩니다. 렌더링시 성능 문제가 될 수있는 각각의 새로운 렌더링으로 생성됩니다.

최근 개발자들은 클래스 속성이라는 JavaScript의 실험 기능을 사용하여 생성자없이 이동하여 화살표 함수를 사용하여 방법 :

class Searcher extends Component { 

    state = { inputValue: '' } 

    onChange = (e) => { 
    this.setState({ 
     inputValue: e.target.value 
    }); 
    } 

    ... 

} 

그러나 여기에는 babel to transform these new features during transpilation을 사용해야합니다. 여분의 babel 구성을 추가하는 것이 가치 있다고 생각하지 않는 한, 아마도 생성자에서 바인딩을 고수하는 것이 가장 좋습니다.

Answer 2

당신은 this.onChange.bind(this)를 사용한다, 또는이는 검색 자 클래스를 참조하지 않습니다.

Answer 3

당신은

import autobind from 'autobind-decorator'; 

class Searcher extends Component { 

    state = { inputValue: '' } 

    @autobind 
    onChange(e){ 
    this.setState({ 
     inputValue: e.target.value 
    }); 
    } 

    ... 

}