immutable.js & react.js setState 清除对象原型

Question

我在组件中有以下代码：

constructor() {
    this.state = Immutable.fromJS({
            user : {
                wasChanged : false,
                firstName : false,
                lastName : false,
                address : {
                    street : false,
                }
            }
        });
}
onEdit({target: {dataset: {target}}}, value) {
      this.setState(function (prevState) {
          return prevState.setIn(['user', target], value);
        });
  }
render() {
    var user = this.state.get('user').toJS();
    ...
}

问题是，当我尝试更新 onEdit 中的值时，我看到 prevState 具有不同的原型集。我不明白为什么或我做错了什么。我在控制台中看到了这个

> Object.getPrototypeOf(this.state)
src_Map__Map {@@__IMMUTABLE_MAP__@@: true}

> Object.getPrototypeOf(prevState)
Object {}

状态改变后，它会去渲染它当然找不到 get 函数或任何来自 Immutable

的地方

使用 React with addons 0.13.3.

Answer 1

Components' state 应该是一个普通的 JavaScript 对象；该对象的 values 可以是不可变值。 issue 3303.

中讨论了支持不可变值作为状态

Answer 2

把它作为状态键。

this.state = {
  data: Immutable...
};

目前您不能将不可变对象用作状态的原因与您不能这样做的原因相同this.state = 7：它不是普通的 JavaScript 对象。

大致的操作是这样的：

React.Component.prototype.setState = (changes) => {
  batchUpdate(() => {
    // copies own properties from state to the new object
    // and then own properties from changes to the new object
    var nextState = Object.assign({}, state, changes);

    this.componentWillUpdate(...);
    this.state = nextState;
    queueDomUpdateStuff(this.render(), () => this.componentDidUpdate());
  });
};

immutable.js & react.js setState 清除对象原型

immutable.js & react.js setState clears prototype of the object

javascript

reactjs

immutable.js