Bereaksi this.setState bukan fungsi

Saya baru di Bereaksi dan saya mencoba menulis aplikasi yang bekerja dengan API. Saya terus mendapatkan kesalahan ini:

TypeError: this.setState bukan fungsi

ketika saya mencoba menangani respons API. Saya curiga ada yang salah dengan pengikatan ini, tetapi saya tidak tahu cara memperbaikinya. Berikut kode komponen saya:

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

Panggilan balik dibuat dalam konteks yang berbeda. Anda perlu binduntuk thisuntuk memiliki akses dalam callback:

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: Sepertinya Anda harus mengikat keduanya initdan apimenelepon:

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

Anda dapat menghindari kebutuhan .bind (this) dengan fungsi panah 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);
        }

    });

Anda juga dapat menyimpan referensi thissebelum memohon apimetode:

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

Bereaksi merekomendasikan untuk mengikat ini dalam semua metode yang perlu menggunakan ini, classbukan ini dari diri function.

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

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

Atau Anda dapat menggunakannya arrow functionsebagai gantinya.

Anda hanya perlu mengikat acara Anda

untuk mantan

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

}

Sekarang ES6 memiliki fungsi panah, sangat membantu jika Anda benar-benar bingung dengan ekspresi bind (ini) Anda dapat mencoba fungsi panah

Inilah yang saya lakukan.

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

Anda tidak perlu menetapkan ini ke variabel lokal jika Anda menggunakan fungsi panah. Fungsi panah akan mengikat secara otomatis dan Anda dapat menghindari masalah terkait ruang lingkup.

Kode di bawah ini menjelaskan cara menggunakan fungsi panah di berbagai skenario

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

Sekarang dalam reaksi dengan es6 / 7 Anda dapat mengikat fungsi ke konteks saat ini dengan fungsi panah seperti ini, membuat permintaan dan menyelesaikan janji seperti ini:

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

Dengan metode ini Anda dapat dengan mudah memanggil fungsi ini di componentDidMount dan menunggu data sebelum membuat html Anda di fungsi render Anda.

Saya tidak tahu ukuran proyek Anda, tetapi saya pribadi menyarankan agar tidak menggunakan status komponen saat ini untuk memanipulasi data. Anda harus menggunakan kondisi eksternal seperti Redux atau Flux atau sesuatu yang lain untuk itu.

gunakan fungsi panah, karena fungsi panah menunjuk ke lingkup induk dan ini akan tersedia. (pengganti teknik mengikat)

Di sini konteks ini berubah. Gunakan fungsi panah untuk menjaga konteks kelas Bereaksi.

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

Jika Anda melakukan ini dan masih memiliki masalah, masalah saya adalah saya memanggil dua variabel dengan nama yang sama.

Saya memiliki companiesobjek yang dibawa dari Firebase, dan kemudian mencoba menelepon this.setState({companies: companies})- itu tidak berfungsi karena alasan yang jelas.