我如何判断 this.setState 何时存在于 ES6 中？

Question

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

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

下面是 ES6 中的同类代码：

请教我如何钓鱼，即帮助我弄清楚如何理解一个对象何时有 this.setState 或没有？

我尝试过的东西

通过谷歌搜索，我了解到您可以 default bind everything 通过更改基本组件。不幸的是，这在 this.setState 时不起作用。它看起来与控制台中 this 的 ES5 版本相同，因此我得出结论，setState 仍未以某种方式绑定

Answer 1

您可以将 console.log 替换为：

console.shallowCloneLog = function(){
    var typeString = Function.prototype.call.bind(Object.prototype.toString)
    console.log.apply(console, Array.prototype.map.call(arguments, function(x){
        switch (typeString(x).slice(8, -1)) {
            case 'Number': case 'String': case 'Undefined': case 'Null': case 'Boolean': return x;
            case 'Array': return x.slice();
            default:
                var out = Object.create(Object.getPrototypeOf(x));
                out.constructor = x.constructor;
                for (var key in x) {
                    out[key] = x[key];
                }
                Object.defineProperty(out, 'constructor', {value: x.constructor});
                return out;
        }
    }));
}

无论如何，关于你的问题，你可以添加这样的方法：

updateValue = () => {...}

in m POV - es6 很酷也很棒。 es6' 类的 React 组件没用。坚持使用 createClass，你会没事的（如果你愿意，可以使用 mixins！）

Answer 2

尝试Object.prototype.hasOwnProperty()。例如：

var X = function() {};
X.prototype.setSomething = 'a';
var x = new X();
x.setSomething; // log 'a' here
x.hasOwnPrperty('setSomething') // log false here

在你的情况下，只需 console.log(this.hasOwnProperty('setState'))。

Answer 3

您必须将 updateValue 函数与组件绑定才能获得正确的上下文 (this)。

在您的情况下，您的 parent class BaseComponent 允许您像那样使用继承方法 _bind :

class App extends BaseComponent {
  constructor(props){
    super(props);
    this.state={value:'start'};
    this._bind('updateValue');
...

Answer 4

过度简化 this 在 JS 中的工作方式：

如果您将函数作为对象方法调用（例如，instance.foo()），则 this 指的是该对象实例。
如果你自己调用一个函数（例如，foo()），那么 this 要么是 undefined 要么是全局对象，这取决于是否启用了严格模式。
如果您引用一个对象方法然后调用它，这意味着您正在调用它本身，即使它最初是一个对象方法。（例如，var bar = instance.foo; bar();.

同样，这是过于简单化了； MDN 有详细信息。

因为这适用于 React，并且如 "Handling Events" 上的 React 文档中所述：

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 呈现为

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

您将引用 updateValue 函数作为简单函数传递，因此 this 不会绑定在 updateValue.

中

基本上，任何时候你将一个函数作为 React prop 传递，除非你自己绑定它，否则很可能是一个错误。症状通常是 this 未定义。在你的代码中，它有点复杂：

this.props.updateValue(modifiedValue);

RawInput 的 updateValue 属性是未绑定函数 App.updateValue，但因为您将其作为 this.props.updateValue 调用，所以它被称为 as如果它是 this.props 的方法 - 那么 this 指的是 RawInput 的 props。这就是为什么您的 console.log 显示的对象只有两个属性（start 和 updateValue）：并不是 setState 没有绑定或消失，而是updateValue 未绑定，因此 this 不是您在 updateValue 中所期望的。

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

使用粗箭头函数：updateValue={(value) => this.updateValue(value)}
使用实验性属性初始化语法：将 updateValue(modifiedValue) {...} 替换为 updateValue = (modifiedValue) => {...}。
React 文档中没有提到，但我经常使用的一种方法：Bind updateValue yourself。例如：

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

我如何判断 this.setState 何时存在于 ES6 中？

How can I tell when this.setState exists in ES6?

ecmascript-5

ecmascript-6

reactjs