[javascript] 반응-catch되지 않은 TypeError : 정의되지 않은 ‘setState’속성을 읽을 수 없습니다.

JAVASCRIPT / 글쓴이

다음과 같은 오류가 발생합니다

잡히지 않은 TypeError : 정의되지 않은 ‘setState’속성을 읽을 수 없습니다

생성자에서 델타를 바인딩 한 후에도.

class Counter extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            count : 1
        };

        this.delta.bind(this);
    }

    delta() {
        this.setState({
            count : this.state.count++
        });
    }

    render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
                <button onClick={this.delta}>+</button>
            </div>
        );
    }
}

답변

this.delta에 바인딩되지 않았기 때문 this입니다.

this.delta = this.delta.bind(this)생성자에서 set을 바인딩하려면 :

constructor(props) {
    super(props);

    this.state = {
        count : 1
    };

    this.delta = this.delta.bind(this);
}

현재 바인드를 호출하고 있습니다. 그러나 bind는 바운드 함수를 반환합니다. 함수를 바인딩 된 값으로 설정해야합니다.

답변

에서는 ES7 + (ES2016)는 실험 사용할 수 기능 바인드 구문 연산자를 ::바인드한다. 그것은 구문 설탕이며 Davin Tryon의 대답과 똑같이 할 것입니다.

그런 다음 다시 작성할 수 있습니다 this.delta = this.delta.bind(this);에this.delta = ::this.delta;

들어 ES6 + (ES2015) 당신은 또한 ES6를 사용 + 수있는 기능을 화살표 ( =>사용할 수 있도록) this.

delta = () => {
    this.setState({
        count : this.state.count + 1
    });
}

왜 ? Mozilla 문서에서 :

화살표 함수까지 모든 새로운 함수는 자체적 으로이 값을 정의했습니다 […]. 이것은 객체 지향 스타일의 프로그래밍으로 성가신 것으로 판명되었습니다.

화살표 함수 는 둘러싼 컨텍스트 의이 값을 캡처합니다 …]

답변

ES5와 ES6 클래스 사이에는 컨텍스트가 다릅니다. 따라서 구현 사이에도 약간의 차이가 있습니다.

ES5 버전은 다음과 같습니다.

var Counter = React.createClass({
    getInitialState: function() { return { count : 1 }; },
    delta: function() {
        this.setState({
            count : this.state.count++
        });
    },
    render: function() {
        return (
            <div>
              <h1>{this.state.count}</h1>
              <button onClick={this.delta}>+</button>
            </div>
            );
    }
});

그리고 여기 ES6 버전이 있습니다 :

class Counter extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count : 1 };
    }

    delta() {
        this.setState({
            count : this.state.count++
        });
    }

    render() {
        return (
            <div>
              <h1>{this.state.count}</h1>
              <button onClick={this.delta.bind(this)}>+</button>
            </div>
            );
    }
}

클래스 구현의 구문 차이 외에도 이벤트 핸들러 바인딩에 차이가 있습니다.

ES5 버전에서는

              <button onClick={this.delta}>+</button>

ES6 버전에서는 다음과 같습니다.

              <button onClick={this.delta.bind(this)}>+</button>

답변

React에서 ES6 코드를 사용할 때는 항상 화살표 기능을 사용하십시오. 이 컨텍스트는 자동으로 바인딩되므로

이것을 사용하십시오 :

(videos) => {
    this.setState({ videos: videos });
    console.log(this.state.videos);
};

대신에:

function(videos) {
    this.setState({ videos: videos });
    console.log(this.state.videos);
};

답변

당신은 아무것도 바인딩 할 필요가 없습니다. 다음과 같이 Arrow 함수를 사용하십시오. 

class Counter extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            count: 1
        };

    }
    //ARROW FUNCTION
    delta = () => {
        this.setState({
            count: this.state.count++
        });
    }

    render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
                <button onClick={this.delta}>+</button>
            </div>
        );
    }
}

답변

다음을 사용할 수도 있습니다.

<button onClick={()=>this.delta()}>+</button>

또는: 

<button onClick={event=>this.delta(event)}>+</button>

당신은 몇 가지 매개 변수를 전달하는 경우 ..

답변

이것을 생성자에 바인딩하고 생성자에 대한 변경 사항이 서버를 다시 시작해야한다는 것을 기억하십시오. 그렇지 않으면 같은 오류로 끝납니다.