扩展javascript（ES6）箭头符号（简写）为完整语法？

Question

I am relatively new to javascript and ive been learning React. I followed a few tutorials for fetching data from an API in React using fetch(). The tutorial worked fine of course, and when recreating it with a different API it took me hours to figure out how to reproduce it even copying the shorthand code, so I've been trying to expand this code, so I can understand exactly what is going on.

fetch(request)
    .then(response => response.json())
    .then(data => { 
        let drinkNames = data.data.map(
            (dataSelect) => {
            return (
                <div key={dataSelect.data}>
                {dataSelect.name}
                </div >
            )
        })
        this.setState({drinks:drinkNames});
    })

That is theshorthand code and it contains what would seem like embeded functions that return other functions, but when trying to expand it everything I try gives me an error, and I would like to understand what is going on. Can anybody help me expand that code?

I read from the documentation that in its basic use, the arrow function returns whatever is in brackets. Following that logic, i tried

then(function(data){

        function longhand(){
            let drinkNames = data.data.map(
            (dataSelect) => {
                return (
                    <div key={dataSelect.data}>
                    {dataSelect.name}
                    </div >
                )
            })
        }

        return longhand();

This obviously doesnt work, and it seems there is another shorthand arrow function inside my new longhand() function, so I'm overall a bit confused. help?

Answer 1

The arrow functions expand in the following manner:

then(data => data.id)

is equal to:

then(function(data) {
    return data.id
});

So, your original code in ES5 syntax would look like this:

fetch(request)
    .then(function(response) {
        return response.json()
    })
    .then(function(data) { 
        let drinkNames = data.data.map(function(dataSelect) {
            return (
                <div key={dataSelect.data}>
                    {dataSelect.name}
                </div >
            )
        })
        this.setState({drinks:drinkNames});
    })

UPDATE:

As it was correctly mentioned in the comment the context of this will change, as arrow functions unlike regular functions don't create their own context. Without seeing your entire component I couldn't tell you with a 100% certainty what this will change to, however I suspect that it will be Window or undefined. You can always use Function.prototype.bind to explicitly tell the function what this should refer to.