Question

我发现，当通过setState设置类实例时，它会丢失其构造函数并成为plain object。我在文档中看到setState将值与当前状态合并，可能无法处理复杂类型。那么，国家是否应该是普通的内置型？

===== code ===

/** @jsx React.DOM */

//===============  transpiled through babeljs.io ======//
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Data = (function () {
    function Data() {
        _classCallCheck(this, Data);
    }

    Data.prototype.isLoading = function isLoading() {
        return this.__state == 2;
    };

    return Data;
})();

//============

var Hello = React.createClass({
  getInitialState: function() {
    return new Data();
  },

  render: function() {
    return (
      <div>
      State: <pre>{JSON.stringify(this.state)} proto: {this.state.constructor.name} </pre>
      <button onClick={this.setXsimple}>setState</button>
      </div>
    );
  },

  setXsimple: function() {
    this.setState(new Data());
  }
});

React.renderComponent(<Hello name="World" />, document.body);

Answer 1

是的，this.state应该是一个普通的JavaScript对象。但是，您可以将复杂类型作为该对象的值：

/** @jsx React.DOM */

//===============  transpiled through babeljs.io ======//
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Data = (function () {
    function Data() {
        _classCallCheck(this, Data);
    }

    Data.prototype.isLoading = function isLoading() {
        return this.__state == 2;
    };

    return Data;
})();

//============

var Hello = React.createClass({
  getInitialState: function() {
    return { data: new Data() };
  },

  render: function() {
    return (
      <div>
      State: <pre>{JSON.stringify(this.state)} proto: {this.state.data.constructor.name} </pre>
      <button onClick={this.setXsimple}>setState</button>
      </div>
    );
  },

  setXsimple: function() {
    this.setState({ data: new Data() });
  }
});

Answer 2

来自docs：

第一个参数可以是一个对象（包含零个或多个键）更新）或返回对象的函数（状态和道具）包含要更新的密钥。

我认为它们指的是普通对象，而不是类或数组f。离。

setState更改构造函数类型

2 个答案: