Phản ứng this.setState không phải là một hàm

Tôi mới tham gia React và tôi đang cố gắng viết một ứng dụng hoạt động với API. Tôi cứ bị lỗi này:

TypeError: this.setState không phải là một hàm

khi tôi cố gắng xử lý phản hồi API. Tôi nghi ngờ có gì đó không ổn với ràng buộc này nhưng tôi không thể tìm ra cách khắc phục. Đây là mã của thành phần của tôi:

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>
        );
    }
});

Cuộc gọi lại được thực hiện trong một bối cảnh khác nhau. Bạn cần phải bindđến thisđể có thể tiếp cận bên trong gọi lại:

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));

EDIT: Có vẻ như bạn phải ràng buộc cả cuộc gọi initvà apicuộc gọi:

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');

Bạn có thể tránh sự cần thiết của .bind (cái này) với chức năng mũi tên ES6.

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);
        }

    });

bạn cũng có thể lưu một tham chiếu đến thistrước khi bạn gọi apiphương thức:

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 khuyên bạn nên ràng buộc điều này trong tất cả các phương pháp cần sử dụng phương pháp này classthay vì phương pháp này function.

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

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

Hoặc bạn có thể sử dụng arrow functionthay thế.

Bạn chỉ cần ràng buộc sự kiện của bạn

ví dụ

// 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});

}

Bây giờ ES6 có chức năng mũi tên, nó thực sự hữu ích nếu bạn thực sự nhầm lẫn với biểu thức liên kết (này), bạn có thể thử chức năng mũi tên

Đây là cách tôi làm.

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));
 }

Bạn không cần gán giá trị này cho biến cục bộ nếu bạn sử dụng hàm mũi tên. Các hàm mũi tên sẽ tự động ràng buộc và bạn có thể tránh xa các vấn đề liên quan đến phạm vi.

Mã dưới đây giải thích cách sử dụng chức năng mũi tên trong các tình huống khác nhau

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');
 },

Bây giờ khi phản ứng với es6 / 7, bạn có thể liên kết chức năng với bối cảnh hiện tại với chức năng mũi tên như thế này, thực hiện yêu cầu và giải quyết các lời hứa như thế này:

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

Với phương pháp này, bạn có thể dễ dàng gọi hàm này trong thành phầnDidMount và đợi dữ liệu trước khi kết xuất html trong hàm kết xuất của bạn.

Tôi không biết quy mô dự án của bạn nhưng cá nhân tôi khuyên không nên sử dụng trạng thái hiện tại của thành phần để thao tác dữ liệu. Bạn nên sử dụng trạng thái bên ngoài như Redux hoặc Flux hoặc một cái gì đó khác cho điều đó.

sử dụng các hàm mũi tên, vì các hàm mũi tên trỏ đến phạm vi cha và điều này sẽ có sẵn. (thay thế kỹ thuật liên kết)

Ở đây bối cảnh NÀY đang được thay đổi. Sử dụng hàm mũi tên để giữ ngữ cảnh của lớp 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');

Nếu bạn đang làm điều này và vẫn gặp sự cố, vấn đề của tôi là tôi đã gọi hai biến cùng tên.

Tôi đã có companiesmột đối tượng được mang đến từ Firebase, và sau đó đang cố gắng gọi this.setState({companies: companies})- nó không hoạt động vì những lý do rõ ràng.