Question

我正在使用React，在我的componentDidMount() {}内部，我正在调用一个导入的函数，并且想访问其中的this.setState。

在componentDidMount内，当我console.log(this)时，我按预期得到组件。

但是，如果我运行myFunction.call(this)，则myFunction内部的console.log(this)返回undefined。

有什么想法无法正确传递this吗？

edit1：添加代码。

组件：

class Navbar extends React.Component {
    componentDidMount() {
        myFunction.call();
    }
}

myFunction.js：

export const myFunction = () => {
    console.log('this:', this);
}

控制台输出：

this: undefined

edit2：有人将其标记为“我可以绑定箭头函数”的重复项，但是myFunction是箭头函数，即使我直接调用它而不是使用.call（），它也会产生相同的结果：{{1} }未定义。

Answer 1

在构造函数中绑定导入的函数：

import { myFunction } from './path/to/myFunction';

class Navbar extends React.Component {
    constructor() {
       /* other constrcutor code */
       myFunction = myFunction.bind(this);
    }
    componentDidMount() {
       myFunction();
    }
}

在您的myFunction.js中，将ES6箭头功能转换为常规ES5功能（请参见Can you bind arrow functions?）：

export const myFunction = function() {
    console.log('this:', this);
}

使用bind（）call（）或apply（）时，不会将此`this`传递给函数

1 个答案: