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

Question

我正在尝试使用ImmutableJS来帮助维护React组件中的状态。如果状态包含一个不可变的对象，我可以很好地使用它。但是，如果 entire 状态是一个不可变的对象，那么每当我尝试 setState（）并显示错误

时，它都会失败

  

TypeError：this.state.get不是函数。

下面是重现该错误的最小示例。每次按下 increment 按钮时，count变量应增加并重新呈现。请帮助我了解为什么这种方法行不通。谢谢！

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

请参阅文档中的this part。

  

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

因此，setState之后，您将剩下一个空对象。

这里是另一个相关资源：https://github.com/facebook/immutable-js/wiki/Immutable-as-React-state

  

请注意，状态必须是普通的JS对象，而不是不可变的   集合，因为React的setState API需要对象文字和   会将其（Object.assign）与先前的状态合并。

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

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