为什么会收到TypeError：this.getToken不是函数-React JS

Question

I've created a login page that consumes a json API. The login page generates a token upon successful authentication and directs the user to a page that will consist of three dropdown boxes. In focusing on just one of the dropdown boxes, I'm attempting to have the dropdown box to display the client's user name according to their token.

The login page calls a function from another react JS page that authenticates the user.

The function:

getToken() {
        // Retrieves the user token from localStorage
        return localStorage.getItem('id_token')
    }

In my landing page, which contain the dropdown box, I have the following code:

   componentDidMount() {
        fetch('http://theClientAPI:1111/api/clients', {
            method: 'GET',
            headers: {
                'Content-type': 'application/json',
                'Authorization': `Bearer ${this.getToken()}`
            },
        })
        .then(results => results.json())
        .then(data => this.setState({ data: data }))
    }

In the render() section, I have the following:

 <div>
        <select className="custom-select" id="clientName">
                { this.state.data.map(item =>(
                <option key={item.clientName}>{item.clientName}</option>
                ))
                }
            </select>
        </div>

The error appears on this line of my Fetch:

'Authorization': `Bearer ${this.getToken()}`

Could I get some assistance as to what I'm doing wrong? Please let me know if you require more information. I posted the code behind my login and the authentication page below:

Login Page: https://codepen.io/lkennedy009/pen/GdYOYe?editors=0010#0 AuthService Page: https://codepen.io/lkennedy009/pen/xjyPMY

Answer 1

There are a few possible errors with your code.

1. It is common good practice to bind your functions in the constructor and will save you any additional errors you might encounter

    constructor(props) { super(props); // This binding is necessary to make `this` work in the callback this.getToken = this.getToken.bind(this); } 

2. Instead of calling your function like this

    'Authorization': `Bearer ${this.getToken()}` 

   Always try to define it in a constant, it can help with debugging and it is a good practice because functions can get complex and making smaller components / patterns is what makes React useful - so you should do that. So instead of the example above try something like this:

    const bearerToken = this.getToken(); //check if you even get what you expect console.log(bearerToken); ... 'Authorization': `Bearer ${bearerToken}` 

3. Finally, these are the changes I would try to make your code work:

    constructor(props) { super(props); this.getToken = this.getToken.bind(this); } componentDidMount() { const bearerToken = this.getToken(); fetch('http://theClientAPI:1111/api/clients', { method: 'GET', headers: { 'Content-type': 'application/json', 'Authorization': `Bearer ${bearerToken}` }, }) .then(results => results.json()) .then(data => this.setState({ data: data })) } getToken() { return localStorage.getItem('id_token'); } 

The reason I defined getToken after componentDidMount its because of AirBnB's ESlint rules for Javascript would throw a warning if it was defined above componentDidMount or other reserved React functions (lifecycles and others)