react：“this”在组件函数中未定义

IT技术 javascript reactjs this
2021-01-26 14:02:41 
class PlayerControls extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      loopActive: false,
      shuffleActive: false,
    }
  }

  render() {
    var shuffleClassName = this.state.toggleActive ? "player-control-icon active" : "player-control-icon"

    return (
      <div className="player-controls">
        <FontAwesome
          className="player-control-icon"
          name='refresh'
          onClick={this.onToggleLoop}
          spin={this.state.loopActive}
        />
        <FontAwesome
          className={shuffleClassName}
          name='random'
          onClick={this.onToggleShuffle}
        />
      </div>
    );
  }

  onToggleLoop(event) {
    // "this is undefined??" <--- here
    this.setState({loopActive: !this.state.loopActive})
    this.props.onToggleLoop()
  }

我想loopActive在切换时更新状态，但this处理程序中未定义对象。根据教程文档，我this应该参考组件。我错过了什么吗？

6个回答

ES6React.Component不会自动将方法绑定到自身。您需要自己将它们绑定到constructor. 像这样：

constructor (props){
  super(props);
  
  this.state = {
      loopActive: false,
      shuffleActive: false,
    };
  
  this.onToggleLoop = this.onToggleLoop.bind(this);

}
你真的必须绑定每个反应类的每个方法吗？这不是有点疯狂吗？
2021-03-13 14:02:41
如果您() => this.onToggleLoop在将 onToggleLoop 函数移动到您的反应类之后将您的 onClick 属性更改为它也将起作用。
2021-03-15 14:02:41
文章的 TLDR：改用箭头函数。
2021-04-03 14:02:41
@AlexL 有一些方法可以在不显式绑定方法的情况下做到这一点。如果您使用 babel，则可以将 React 组件上的每个方法声明为箭头函数。这里有例子：babeljs.io/blog/2015/06/07/react-on-es6-plus
2021-04-06 14:02:41
但是为什么首先是this未定义的？我知道this在 Javascript 中取决于函数的调用方式，但是这里发生了什么？
2021-04-06 14:02:41

有几种方法。

一种是this.onToggleLoop = this.onToggleLoop.bind(this);在构造函数中添加 。

另一个是箭头函数 onToggleLoop = (event) => {...}。

然后是onClick={this.onToggleLoop.bind(this)}。

请注意，内联中的绑定onClick将在每次渲染时返回一个新函数，因此看起来像是为 prop 传递了一个新值，与shouldComponentUpdatein PureComponents混淆。
2021-03-19 14:02:41
为什么 onToogleLoop = () => {} 有效？我遇到了同样的问题，我在我的构造函数中绑定了它，但它没有用……现在我看到了你的帖子，并用箭头函数语法替换了我的方法，它可以工作。你能给我解释一下吗？
2021-03-28 14:02:41
来自developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...；箭头函数不会创建自己的 this，而是使用封闭执行上下文的 this 值。
2021-04-06 14:02:41

这样写你的函数：

onToggleLoop = (event) => {
    this.setState({loopActive: !this.state.loopActive})
    this.props.onToggleLoop()
}

粗箭头函数

关键字 this 的绑定在粗箭头函数的外部和内部是相同的。这与使用 function 声明的函数不同，后者可以在调用时将 this 绑定到另一个对象。维护 this 绑定对于映射之类的操作非常方便：this.items.map(x => this.doSomethingWith(x))。

如果在构造函数中我说 this.func = () => { ... } ，它会起作用，但我认为这是一种愚蠢的行为，并希望尽可能避免它。
2021-03-11 14:02:41
太糟糕了，你不能在 React 中使用普通的类语法！
2021-03-12 14:02:41
如果我这样做，我会得到ReferenceError: fields are not currently supported.
2021-04-05 14:02:41

我在渲染函数中遇到了类似的绑定，最终this以以下方式传递了 的上下文：

{someList.map(function(listItem) {
  // your code
}, this)}

我也用过：

{someList.map((listItem, index) =>
    <div onClick={this.someFunction.bind(this, listItem)} />
)}
@TJCrowder 是的，每次调用渲染时都会重新创建这些函数。最好将函数创建为类方法并将它们绑定到类，但对于初学者来说，手动上下文绑定可能会有所帮助
2021-03-23 14:02:41
这是您在那里创建的许多不必要的功能，每次呈现列表时...
2021-04-09 14:02:41

您应该注意到这this取决于函数的调用方式，即：当一个函数作为this对象的方法被调用时，它被设置为调用该方法的对象。

this可以在 JSX 上下文中作为组件对象访问，因此您可以将所需的方法作为this方法内联调用。

如果您只是传递对函数/方法的引用，则 react 似乎会将其作为独立函数调用。 

onClick={this.onToggleLoop} // Here you just passing reference, React will invoke it as independent function and this will be undefined

onClick={()=>this.onToggleLoop()} // Here you invoking your desired function as method of this, and this in that function will be set to object from that function is called ie: your component object
是的，您甚至可以使用第一行，即onClick={this.onToggleLoop}前提是您在组件类中定义了一个字段（属性）onToggleLoop = () => /*body using 'this'*/
2021-04-01 14:02:41
其它你可能感兴趣的问题
上一篇在 textarea 中渲染 HTML 下一篇没有 var、let 或 const 的对象解构