在React组件中未定义“ this”

Question

I have the following component:

import React from 'react';
import {Route, Redirect} from 'react-router-dom';
import {isAuthenticated} from "../../helpers/auth_utils";

const PrivateRoute = ({component, ...rest}) => {
    //TODO how these two component's are different?
    let {component: Component, ...componentProps} = this.props;

    return (<Route {...rest} render={props => {
        if (isAuthenticated()) {
            return <Component component={component} {...componentProps}/>;
        } else {
            return <Redirect to={{pathname: '/login', state: {from: props.location}}}/>;
        }
    }
    }/>);
};

export default PrivateRoute;

It's strange that this is undefined in this component. What am I doing wrong here?

Answer 1

Arrow functinos don't have their own this . They get the scope that's above them, here the scope is Window, but in strict mode javascript doesn't want accidental use of window , so they make it undefined. Thus this is undefined.

You can try wrapping PrivateRoute into a class, and you will see that then this would be the class.

To have your function create it's own context, you need to change it from arrow function to regular one.

const PrivateRoute = function({component, ...rest}) {

Answer 2

Arrow functions don't have their “own” this . When you reference this from such a function, it's taken from the outer “normal” function.

From MDN ,

An arrow function expression has a shorter syntax than a function expression and does not have its own this, arguments, super, or new.target. These function expressions are best suited for non-method functions, and they cannot be used as constructors.

let user = {
  firstName: "Arian",
  sayHi() {
    let arrow = () => alert(this.firstName);
    arrow();
  }
};

user.sayHi(); // Arian

Answer 3

this keyword does not refers to arrow function. It refers to regular function.

In your case, you can do some thing like this

const PrivateRoute = (props) => { //TODO how these two component's are different? let {component: Component, ...componentProps} = props;

Make sure component and componentProps are available in props.