'this' 在 React 组件函数中未定义答案

【问题标题】：'this' is undefined in React component function'this' 在 React 组件函数中未定义
【发布时间】：2017-07-16 22:43:33
【问题描述】：

当我尝试执行以下代码时，函数renderContents 中this 的值是undefined。

我原以为胖箭头函数会自动绑定 this。不是这样吗？如果没有，我如何确保this 被传递给函数renderContents？

代码示例：

class Box extends React.Component {
  renderContents = () => {
      console.log(this); // undefined
      return (
        <div></div>
        )
  }

   render() {
      const { 
        someValue,
      } = this.props;

      return (
            <div>
              {someValue ? this.renderContents() : null}
            </div>
            );
    }
  }

【问题讨论】：

您的代码对我来说似乎很好。你确定这个例子足以重现你所描述的吗？
够了。有人回答告诉我不要使用箭头功能，但现在答案已经消失了。我放弃了箭头函数语法，一切都像那样工作。
不是这样。使用方法绝对是一种应该也工作的替代方法，但你的代码也应该没有任何问题，如所示会使其无法工作。
这是一个 JSFiddle，您的代码按原样运行：jsfiddle.net/bvpe4j39/150
只是箭头函数。箭头函数没有上下文，这意味着没有专门附加的“this”。 ...An arrow function does not create its own this, the this value of the enclosing execution context is used... - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

标签： javascript reactjs ecmascript-6 ecmascript-next

【解决方案1】：

没有错。我只是这样称呼它：

ReactDOM.render((<Box someValue={true} />), document.getElementById('content'));

我得到了 this 的值：

所以我认为问题是，你说得不对，你是在设置 someValue 吗？？

【讨论】：

事实并非如此。不过谢谢。
那么请向我们提供更多信息。因为除非我称它为坏，否则我无法重现。
这个例子绝对不足以重现这个问题。我也尝试了您的示例代码，它运行良好。还有其他因素影响这个问题。

【解决方案2】：

您在 renderContent 方法中犯了错误。您将其声明为函数，并且它没有您的组件的上下文。请尝试声明这样的方法：

renderContent() {
 ...your code...
}

取而代之的是：

renderContent = () => {}

【讨论】：

@TylerSebastian 根据developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…“箭头函数”本身没有上下文，这意味着他是对的。
@camou 你读过你的源码了吗？ “使用封闭执行上下文的 this 值”意味着它将采用封闭 React 组件的值
@TylerSebastian 很抱歉，但我认为这是不正确的，在这种情况下，执行上下文不是组件而是全局对象。我将不得不做更多的测试，但我很确定情况就是这样。如果你做一些测试，请告诉我。
@camou: renderContent = () => {} 是public class fields proposal。 renderContent = () => {} 在构造函数内部计算。
好的，我知道了。 @TylerSebastian，基本上，我们都是正确的:)。由于 OP 很可能正在为 React 使用转译器，因此一些转译器（例如 Babel）添加了额外的提议 ES.next 功能，这些功能仍然是草稿，比如目前还没有单独在 V8 中实现的这个功能。我所有的测试都是在没有转译器的 V8 中完成的，现在不支持该语法。没有转译器：jsbin.com/gebociz/6/edit?js,console，有转译器：jsbin.com/wazigoq/1/edit?js,console。

【解决方案3】：

你试过添加构造方法吗？

constructor(props) {
    super(props)
}

编辑：

您可以像这样在构造函数中绑定上下文，而不是使用箭头函数：

class Box extends React.Component {
    constructor(props) {
        super(props)

        this.renderContents = this.renderContents.bind(this)
    }

    renderContents() {
        console.log(this);
        return (
            <div></div>
        )
    }

    render() {
       const { 
           someValue,
       } = this.props;

       return (
           <div>
               {someValue ? this.renderContents() : null}
           </div>
       );
    }
}

在 react 类中，只有一些方法是隐式绑定的（render、componentDidMount、componentWillUnmount 等），其他方法则必须在构造函数中手动绑定或使用箭头函数。

【讨论】：

拥有构造函数并没有什么不同。
仅供参考，您的编辑本质上就是问题中的语法。 renderContents = () => { 是在构造函数中初始化的值的建议语法，这意味着它是一个 renderContents 属性，包含一个绑定到 this 的函数。
@loganfsmyth 我知道，我一直在反应组件中使用箭头函数。但是由于他提供的代码显然是正确的，我只是提出了不同的方法。正如我写的：...在构造函数中手动绑定或使用箭头函数。