如何知道this.setState在ES6中何时存在? [英] How can I tell when this.setState exists in ES6?

问题描述

我一直在努力将我的React代码从ES5迁移到ES6.正如我现在所发现的，this不再自动绑定，这会导致各种各样的麻烦.

I have been struggling with trying to migrate my React code from ES5 to ES6. As I have found out by now, this is no longer automatically bound which causes all sorts of hell.

我正在尝试通过反复试验弄清哪些对象正在传递.到目前为止，我可以找到所有内容并进行相应调整.但是，当涉及到this.setState时，我遇到了问题，因为它在console.log中不可见.参见ES5中的屏幕截图:

I am trying to figure out by trial and error what objects are being passed around. So far I can find everything and adjust accordingly. However when it comes to this.setState I am having problems because it is not visible in console.log!!!! See screenshot in ES5:

，这是ES6中相同的代码:

and here is the same kind of code in ES6:

请教我如何钓鱼，即帮助我弄清楚如何理解对象何时具有this.setState?

Please teach me how to fish i.e. help me figure out how to understand when an object has this.setState or not?

我尝试过的事情

1. 从谷歌搜索中了解到，您也许可以默认通过更改基本组件来绑定所有内容.不幸的是，当涉及到this.setState时，此方法不起作用.它看起来与控制台中的this的ES5版本相同，因此我得出结论，setState仍未以某种方式绑定

1. from googling around i understand you might be able to default bind everything by changing the base component. unfortunately this did not work when it came to this.setState. It looks identical to the ES5 version of this in console so I concluded that setState is still not being bound somehow

推荐答案

为了简化this在JS中的工作方式，

To oversimplify how this works in JS:

• 如果将函数作为对象方法(例如instance.foo())调用，则this引用该对象实例.
• 如果您自己调用函数(例如foo())，则this是undefined还是全局对象，具体取决于严格模式是否有效.
• 如果引用对象方法然后对其进行调用，则意味着您是在单独调用它，即使它最初是对象方法. (例如，var bar = instance.foo; bar();.

• If you call a function as an object method (e.g., instance.foo()) then this refers to that object instance.
• If you call a function by itself (e.g., foo()), then this is either undefined or the global object, depending on whether strict mode is in effect.
• If you take a reference to an object method then call it, that means you're calling it by itself, even though it was originally an object method. (E.g., var bar = instance.foo; bar();.

再次，这是一个过分的简化； MDN 包含详细信息.

Again, this is an oversimplification; MDN has details.

这适用于React，并且如"处理事件" :

As this applies to React, and as explained in the React documentation on "Handling Events":

您必须注意JSX回调中this的含义.在JavaScript中，默认情况下不绑定类方法.如果忘记绑定this.handleClick并将其传递给onClick，则在实际调用该函数时，this将为undefined.

You have to be careful about the meaning of this in JSX callbacks. In JavaScript, class methods are not bound by default. If you forget to bind this.handleClick and pass it to onClick, this will be undefined when the function is actually called.

在您的代码中，将RawInput呈现为

In your code, you render your RawInput as

 <RawInput value={this.state.value} updateValue={this.updateValue}/>

您要将引用updateValue函数作为一个简单函数传入，因此this不会绑定在updateValue中.

You're passing a reference updateValue function in as a simple function, so this will not be bound within updateValue.

基本上，每次您将函数作为React道具传递时，除非您自己绑定了它，否则很可能会出错.症状通常是this未定义.在您的代码中，它有点复杂:

Basically, any time you pass a function as a React prop, unless you've bound it yourself, it's likely an error. The symptom is typically that this is undefined. In your code, it's a little more complicated:

this.props.updateValue(modifiedValue);

RawInput的updateValue属性是未绑定的函数App.updateValue，但是由于您以this.props.updateValue的身份调用它，因此它被称为，就好像它是this.props 的方法一样-因此this是指RawInput的props.这就是为什么console.log显示的对象只有两个属性(start和updateValue):不是setState没有绑定或消失，不是updateValue没有绑定，因此this不是您在updateValue中所期望的.

The RawInput's updateValue property is the unbound function App.updateValue, but because you're invoking it as this.props.updateValue, it's being called as if it were a method of this.props - so this refers to the RawInput's props. That's why your console.log is showing an object with only two properties (start and updateValue): it isn't that setState isn't bound or went away, it's that updateValue wasn't bound, so this isn't what you expect within updateValue.

要解决此问题，如React文档所述:

To fix the issue, as the React docs explain:

• 使用粗箭头功能:updateValue={(value) => this.updateValue(value)}
• 使用实验性属性初始化程序语法:将updateValue(modifiedValue) {...}替换为updateValue = (modifiedValue) => {...}.
• 在React文档中没有提到，但是我经常使用的一种方法:自己绑定updateValue.例如:

• Use a fat arrow function: updateValue={(value) => this.updateValue(value)}
• Use the experimental property initializer syntax: Replace updateValue(modifiedValue) {...} with updateValue = (modifiedValue) => {...}.
• Not mentioned in the React docs, but an approach I often use: Bind updateValue yourself. For example:

constructor(props) {
    super(props);
    this.updateValue = this.updateValue.bind(this);
}

这篇关于如何知道this.setState在ES6中何时存在?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！