this.props 在 React 组件中的箭头函数中显示为未定义

Posted 2023-02-22

【中文标题】this.props 在 React 组件中的箭头函数中显示为未定义

【英文标题】：this.props shows as undefined in an arrow function within React Component

【发布时间】：2018-04-19 08:43:08

【问题描述】：

我正在使用箭头函数在 React 组件中绑定 this。请参阅下面的handleChange() 函数。当我在箭头函数内部放置断点时，我发现很奇怪：this 被定义了，但是this.props 是undefined。尽管如此，this.props.onChange() 还是被正确调用了！！！这种奇怪的行为有什么解释吗？

class MyComponent extends React.Component 
    render() 
        const  someProp  = this.props;

        // <TextField> is an input component from Material UI library
        return (
            <TextField
                onChange=this.handleChange
            />
        );
    

    handleChange = event => 
        const value = event.target.value;
        this.props.onChange(value);
    ;

附：另一方面，render() 方法行为正常 - 定义了 this.props。

更新

这是 Babel 生成的转译代码：

_this.handleChange = function(event) 
    var value = event.target.value;
    _this.props.onChange(value);

【问题讨论】：

请说明如何调用handleChange

@FuzzyTree，我更新了代码以显示如何调用 handleChange。

你看过实际执行的代码（即转译的代码）吗？转译后的代码可能没有使用this。

你用的是什么 babel 预设？

@nem035，这是我的 Babel 预设：“babel-preset-es2015”：“^6.24.1”、“babel-preset-react”：“^6.24.1”、“babel- preset-react-app": "^3.0.3", "babel-preset-stage-1": "^6.24.1"

【参考方案1】：

你很有可能被 babel 欺骗了。

由于您使用的是 babel-preset

class A 
  method = () => 
    this.prop.a();
  ;

会look something like:

var A = function A() 
  var _this = this;

  this.method = function () 
    _this.prop.a();
  ;
;

查看上面的代码，method 中的_this 和this 似乎都指向类实例（因为this in a function called as a method of an object binds to that object）。

然而，在 JS 中，this 是 dynamic property，所以我们不能仅通过阅读代码以可预测的方式静态确定其值；我们必须运行它。

这意味着handleChange 中的this 不一定与您期望的this 相同。这取决于如何调用handleChange。但是，无论我们如何称呼handleChange，_this 都不会受到影响（这也是 Babel 这样做的原因之一）

在您的特定代码中，您将handleChange 传递给TextField 的onChange 事件处理程序，这将默认将this 覆盖为undefined。

React 事件处理程序将上下文覆盖到 undefined（calling the handler as a plain function）：

ReactDOM.render(
  <input onChange=logThis placeholder="Start typing" />,
  document.querySelector('#example')
)

function logThis() 
  console.log(this);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="example"></div>

这意味着在handleChange 中，this 受TextField 设置的任何约束，而_this 仍指向MyComponent 的实例。

因此一切仍然有效（因为_this 是正确的），但this 很可能是undefined。

【讨论】：

感谢您的详细解释。非常感谢！现在一切都说得通了。

很高兴为您提供帮助 ?