使用ImmutableJS对象作为React组件状态

Question

我试图使用ImmutableJS来帮助维护React组件中的状态。如果状态包含不可变对象，我可以很好地使用它。但是，如果整个状态是一个不可变的对象，那么每当我尝试setState()时，它就会失败。

TypeError: this.state.get不是一个函数。

下面是一个重现错误的最小示例。每次按下增量按钮时，计数变量都应该递增并重新呈现。请帮助我理解为什么这种方法不起作用。谢谢!

import React from 'react';
import { Map as ImmutableMap } from 'immutable'

class App extends React.Component {

  constructor (props) {
    super(props)
    this.state = ImmutableMap({ count: 0 }) // entire state is immutable
  }

  increment () {
    const newCount = this.state.get('count') + 1
    this.setState(prevState => prevState.set('count', newCount))
  }

  render() {
    return (
      <div>
        { this.state.get('count') } // produces error after setState()
        <button onClick={this.increment.bind(this)}>Increment</button>
      </div>
    );
  }

}

export default App;

Answer 1

见文档的这部分。

当调用setState()时，React将您提供的对象合并到当前状态。

因此，在setState之后，您将得到一个空对象。

来自Immutable.js文档

请注意，状态必须是一个普通的JS对象，而不是一个不可变的集合，因为React的setState API需要一个对象文本，并将它(Object.assign)与前一个状态合并。

在当前版本的代码中，ReactUpdateQueue.js中的状态在getStateFromUpdate函数中的实际合并如下：

  // Merge the partial state and the previous state.
  return Object.assign({}, prevState, partialState);