this.setState는 함수가 아닙니다.

this.setState는 함수가 아닙니다.

---

React의 새로운 기능이며 API로 작동하는 앱을 작성하려고합니다. 이 오류가 계속 발생합니다.

TypeError : this.setState는 함수가 아닙니다.

API 응답을 처리하려고 할 때. 이 바인딩에 문제가 있다고 생각하지만 해결 방법을 알 수 없습니다. 내 구성 요소의 코드는 다음과 같습니다.

var AppMain = React.createClass({
    getInitialState: function() {
        return{
            FirstName: " "
        };
    },
    componentDidMount:function(){
        VK.init(function(){
            console.info("API initialisation successful");
            VK.api('users.get',{fields: 'photo_50'},function(data){
                if(data.response){
                    this.setState({ //the error happens here
                        FirstName: data.response[0].first_name
                    });
                    console.info(this.state.FirstName);
                }

            });
        }, function(){
        console.info("API initialisation failed");

        }, '5.34');
    },
    render:function(){
        return (
            <div className="appMain">
            <Header  />
            </div>
        );
    }
});

---

콜백은 다른 상황에서 이루어집니다. 당신은 필요 bind에 this콜백 내부에 액세스하기 위해 :

VK.api('users.get',{fields: 'photo_50'},function(data){
    if(data.response){
        this.setState({ //the error happens here
            FirstName: data.response[0].first_name
        });
        console.info(this.state.FirstName);
    }

}.bind(this));

편집 : init와 api호출을 모두 바인딩 해야하는 것처럼 보입니다 .

VK.init(function(){
        console.info("API initialisation successful");
        VK.api('users.get',{fields: 'photo_50'},function(data){
            if(data.response){
                this.setState({ //the error happens here
                    FirstName: data.response[0].first_name
                });
                console.info(this.state.FirstName);
            }

        }.bind(this));
    }.bind(this), function(){
    console.info("API initialisation failed");

    }, '5.34');

---

ES6 화살표 기능으로 .bind (this)가 필요하지 않습니다.

VK.api('users.get',{fields: 'photo_50'},(data) => {
        if(data.response){
            this.setState({ //the error happens here
                FirstName: data.response[0].first_name
            });
            console.info(this.state.FirstName);
        }

    });

---

메소드 this를 호출하기 전에 참조를 저장할 수도 있습니다 api.

componentDidMount:function(){

    var that = this;

    VK.init(function(){
        console.info("API initialisation successful");
        VK.api('users.get',{fields: 'photo_50'},function(data){
            if(data.response){
                that.setState({ //the error happens here
                    FirstName: data.response[0].first_name
                });
                console.info(that.state.FirstName);
            }
        });
    }, function(){
        console.info("API initialisation failed");

    }, '5.34');
},

---

React는 class이것을 self 대신 대신 사용해야하는 모든 메소드에서 이것을 바인딩하는 것이 좋습니다 function.

constructor(props) {
    super(props)
    this.onClick = this.onClick.bind(this)
}

 onClick () {
     this.setState({...})
 }

또는 arrow function대신 사용할 수 있습니다 .

---

이제 ES6에는 화살표 기능이 있습니다. 바인드 (this) 표현식과 혼동하면 화살표 기능을 시도 할 수 있습니다.

이것이 내가하는 방법입니다.

componentWillMount() {
        ListApi.getList()
            .then(JsonList => this.setState({ List: JsonList }));
    }

 //Above method equalent to this...
     componentWillMount() {
         ListApi.getList()
             .then(function (JsonList) {
                 this.setState({ List: JsonList });
             }.bind(this));
 }

---

당신은 당신의 이벤트를 바인딩해야합니다

예를 들어

// place this code to your constructor

this._handleDelete = this._handleDelete.bind(this);

// and your setState function will work perfectly

_handleDelete(id){

    this.state.list.splice(id, 1);

    this.setState({ list: this.state.list });

    // this.setState({list: list});

}

---

이제 es6 / 7과 반응하여 화살표 함수를 사용하여 현재 컨텍스트에 함수를 바인딩하고 요청을 작성하고 다음과 같은 약속을 해결할 수 있습니다.

listMovies = async () => {
 const request = await VK.api('users.get',{fields: 'photo_50'});
 const data = await request.json()
 if (data) {
  this.setState({movies: data})
 }
}

이 메소드를 사용하면 componentDidMount에서이 함수를 쉽게 호출하고 렌더링 함수에서 html을 렌더링하기 전에 데이터를 기다릴 수 있습니다.

프로젝트의 크기를 모르지만 데이터를 조작하기 위해 구성 요소의 현재 상태를 사용하지 않도록 개인적으로 조언합니다. Redux 또는 Flux와 같은 외부 상태를 사용해야합니다.

---

화살표 함수를 사용하는 경우 이것을 로컬 변수에 할당 할 필요가 없습니다. 화살표 기능은 자동으로 바인딩되며 범위 관련 문제를 피할 수 있습니다.

아래 코드는 다른 시나리오에서 화살표 기능을 사용하는 방법을 설명합니다

componentDidMount = () => {

    VK.init(() => {
        console.info("API initialisation successful");
        VK.api('users.get',{fields: 'photo_50'},(data) => {
            if(data.response){
                that.setState({ //this available here and you can do setState
                    FirstName: data.response[0].first_name
                });
                console.info(that.state.FirstName);
            }
        });
    }, () => {
        console.info("API initialisation failed");

    }, '5.34');
 },

---

여기이 문맥이 바뀌고 있습니다. 화살표 함수를 사용하여 React 클래스의 컨텍스트를 유지하십시오.

        VK.init(() => {
            console.info("API initialisation successful");
            VK.api('users.get',{fields: 'photo_50'},(data) => {
                if(data.response){
                    this.setState({ //the error happens here
                        FirstName: data.response[0].first_name
                    });
                    console.info(this.state.FirstName);
                }

            });
        }, function(){
        console.info("API initialisation failed");

        }, '5.34');

---

당신이 이것을하고 여전히 문제가 있다면, 내 문제는 두 개의 변수를 같은 이름으로 부르고 있다는 것입니다.

나는 companiesFirebase에서 가져온 물건을 가지고 있었고 전화를하려고했습니다 this.setState({companies: companies}). 명백한 이유로 작동하지 않았습니다.

---

화살표 기능은 부모 범위를 가리 키므로 화살표 기능을 사용하면 사용할 수 있습니다. (바인드 기술의 대체)

참고 URL : https://stackoverflow.com/questions/31045716/react-this-setstate-is-not-a-function