오류:정의되지 않은 'setState' 속성을 읽을 수 없습니다.

React 구성 요소를 처음 작성하기 시작하면 그 과정에서 여러 가지 다른 오류가 발생할 수 있습니다. 이러한 두 가지 오류는 "정의되지 않은 'setState' 속성을 읽을 수 없음" 및 "this.setState가 함수가 아닙니다"입니다. 이 문서에서는 이러한 오류를 없애는 몇 가지 방법을 살펴봅니다.

왜?

이러한 오류는 React 구성 요소에서 사용하거나 호출하는 메서드가 올바르게 바인딩되지 않았기 때문에 발생합니다. 다음은 오류를 발생시키는 코드의 예입니다(여기서는 React 구성 요소를 올바르게 설정했다고 가정합니다).

import React from "react";
import "./styles.css";
 
class App extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     input: ""
   };
 }
 
 handleChange(e) {
   this.setState({[e.target.name]: e.target.value})
 }
 render() {
   console.log(this.state)
   return (
     <div className="App">
       <h1>Sample React Application</h1>
       <input name="input" onChange={this.handleChange} value={this.state.input} type="text" placeholder="Type here..."/>
       <input type="submit" />
     </div>
   );
 }
}
 
export default App;

언뜻보기에는 코드가 괜찮아 보이지만 자세히 보면 handleChange 메서드가 App 클래스에 바인딩되어 있지 않으므로 "this" 키워드가 이 인스턴스에서 Window를 참조합니다. 자세히 살펴보기 위해 handleChange 메서드의 첫 번째 줄과 렌더링의 첫 번째 줄에 console.log(this)를 추가해 보겠습니다.

handleChange(e) {
   console.log(this, "change")
   this.setState({[e.target.name]: e.target.value})
 }

render() {
   console.log(this, "render")
   return (
     <div className="App">
       <h1>Sample React Application</h1>
       <input name="input" onChange={this.handleChange} value={this.state.input} type="text" placeholder="Type here..."/>
       <input type="submit" />
     </div>
   );
 }

애플리케이션을 로드할 때 콘솔을 보면 "this" 키워드가 App을 참조한다는 것을 알 수 있습니다. 입력을 사용하려고 하면 화면에 오류가 표시되지만 콘솔을 보면 "this" 키워드가 App이 아니라 Window 개체를 참조한다는 것을 알 수 있습니다. 이 문제를 해결하는 두 가지 방법이 있습니다.

1. 메서드 바인딩

생성자 내부에서 상태 개체 뒤에 다음 줄을 입력합니다.

   this.handleChange = this.handleChange.bind(this);

이 줄은 "this" 키워드를 handleChange 메서드에 바인딩하므로 handleChange를 호출할 때 App 구성 요소를 명시적으로 참조할 수 있습니다. 그렇지 않으면 메서드가 작업하려는 구성 요소를 알지 못하거나 볼 수 없습니다.

2. ES6 화살표 기능

큰 화살표 함수에 ES6 구문을 사용합니다. "this" 키워드를 해당 메서드에 자동으로 바인딩하므로 생성자에서 바인딩할 필요가 없습니다.

handleChange = (e) => {
   this.setState({[e.target.name]: e.target.value})
 }

당신은 그것을 가지고 있습니다! 이것이 React에서 클래스 구성 요소 구조를 사용할 때 "this.setState" is "undefined" 또는 "not function" 오류를 제거하는 방법입니다. 앞으로 이러한 오류를 방지하려면 React 구성 요소를 React Hooks와 함께 기능 구성 요소를 사용하도록 리팩터링하십시오!

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.