使用 ImmutableJS 和 React setState

Question

我目前遇到了让 ImmutableJS 和 React 正常工作的问题。这没有使用 Redux，因此我正在更新组件内的状态。

问题是在我更新状态后，我的 getter 属性在下一次重新渲染时丢失，导致错误。为什么 setState 去掉这些方法？

我是不是没有正确使用 ImmutableJS？ ImmutableJS 只打算与 Redux 一起使用吗？

const AssociateRoleLocationStateFactory = RecordFactory<AssociateRoleLocationState>({
  isEditing: false
})

export default class IAssociateRoleLocation extends React.Component {
  constructor(props) {
    super(props)

    this.state = new AssociateRoleLocationStateFactory({
      isEditing: false
    })

    // `this.state` has `.get` method to retrieve properties
    console.log(`initial state:`, this.state) // Record {_map: Map} 
  }

  toggleEditing() {
    let nextState = this.state.set('isEditing', !this.state.get('isEditing'))

    // `nextState` has `.get` method to retrieve properties
    console.log(`next state:`, nextState) // Record {_map: Map}

    this.setState(nextState)
  }

  render() {
    console.log(this.state) // {_map: Map} // Its missing `.get` method on second render
    let isEditing = this.state.get('isEditing')

    return (
      <div className="site-single-column">
        {isEditing ? (
          <div>
            Is Editing!!
          </div>
        ) : (
          <button style={{ alignSelf: 'center' }} onClick={this.toggleEditing}>
              Toggle
            </button>
        )}
      </div>
    )
  }
}

Answer 1

目前React只支持普通的js对象作为state。你可以把你想要的任何东西包裹在另一个 key/value 层中，比如

constructor(props) {
  super(props);
  this.state = {
    payload: new AssociateRoleLocationStateFactory({
      isEditing: false
    })
  }
}

关于这个的讨论是这样的：https://github.com/facebook/react/issues/3303

但在此之前，请保持纯洁。

使用 ImmutableJS 和 React setState

Using ImmutableJS and React setState

setstate

reactjs

immutable.js