0

I am using google contact api for fetching the contact.

In fetch method's response I am getting all the contacts. But While setting the state using setState its giving an error of Cannot read property 'setState' of undefined. Here is my code.

I had also gone through tutorials for his but not able to find the extact issue in this.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';


class App extends Component {
    constructor(props) {
        super(props)
        this.auth = this.auth.bind(this);
        this.state = {
            userarray: []
        }

    }
    auth() {
        var config = {
            'client_id': 'my-client-id',
            'scope': 'https://www.google.com/m8/feeds'
        };
        window.gapi.auth.authorize(config, function () {
            alert("Dd")
            // this.fetchtt(window.gapi.auth.getToken());  
            fetch("https://www.google.com/m8/feeds/contacts/default/thin?alt=json&access_token=" + window.gapi.auth.getToken().access_token + "&max-results=700&v=3.0", {
                method: 'GET'
            })
                .then((result) => {
                    result.json().then((result) => {

                        // display all your data in console
                        console.log(result.feed);
                        result.feed.entry.map((entry, index) => {

                            console.log(entry.title.$t)
                            const user = [
                                name => entry.title.$t
                            ]
                            this.setState({
                                userarray: "ss"
                            });
                        })
                    })
                }
                )

        });
    }





    render() {
        return (
            <div className="App">
                <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo" />
                    <h1 className="App-title">Welcome to React</h1>
                </header>
                <p className="App-intro">
                    To get started, edit <code>src/App.js</code> and save to reload.
        </p>
                <button onClick={() => this.auth()}>GET CONTACTS FEED</button>
            </div>
        );
    }
}

export default App;
3
  • post the whole component code please Commented May 24, 2018 at 15:33
  • updated. @Karim Commented May 24, 2018 at 15:36
  • Possible duplicate of React this is undefined Commented May 24, 2018 at 15:39

1 Answer 1

2

window.gapi.auth.authorize(config, function () { will change the context in the callback use window.gapi.auth.authorize(config, () => { instead.

PS you don't need to nest your then -

.then(result => result.json())
.then(result => { ... })
Sign up to request clarification or add additional context in comments.

2 Comments

Awesome !! It worked. Is it wrong to nest then? With nesting its working fine though
Cool, no it's fine to nest, I just think it's cleaner to have less nesting but no difference

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.