Использование объекта ImmutableJS в качестве состояния компонента React - PullRequest
Новая
       22

Использование объекта ImmutableJS в качестве состояния компонента React

0 голосов
/ 01 января 2019

Я пытаюсь использовать ImmutableJS, чтобы помочь поддерживать состояние в компоненте React.Я могу использовать это прекрасно, если состояние содержит неизменный объект.Но если состояние whole является неизменяемым объектом, то оно завершается ошибкой всякий раз, когда я пытаюсь 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;

1 Ответ

0 голосов
/ 01 января 2019

См. эту часть документов.

Когда вы вызываете setState (), React объединяет предоставленный вами объект с текущим состоянием.

Таким образом, после setState у вас останется пустой объект.

Вот еще один связанный ресурс: https://github.com/facebook/immutable-js/wiki/Immutable-as-React-state

Обратите внимание, что состояние должно быть простым JS-объектом,а не коллекция Immutable, поскольку API React setState ожидает объектный литерал и объединит его (Object.assign) с предыдущим состоянием.

В текущей версии кода фактическое слияниесостояние возникает в ReactUpdateQueue.js в функции getStateFromUpdate со следующей строкой: 

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