javascript - 使用不变性助手更新更新状态

Question

我想用不变性辅助函数 update ( https://github.com/kolodny/immutability-helper ) 更新我的状态

state = {
    field: '',
    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6']
  };

addElementToList() {
 const i = this.state.items.length;
 const newState = ()=> {
  update(this.state,
    {
      items: {
        $push: [
          {
            [i]: this.state.field
          }
        ]
      }
     }
   )
 };
 this.setState = newState;
}

不幸的是，我在执行函数时收到以下错误。

Uncaught TypeError: (0 , _immutabilityHelper.update) is not a function

我错过了什么，对此有什么想法吗？

Answer 1

我知道 OP 要求提供有关使用此第 3 方库的答案，但此库的原始代码片段生成的代码具有类似于回调 hell 的美学:特别是使用很多嵌套大括号 和 大括号。

因此，我只是想权衡一下如何使用 JavaScript 的 Array.prototype.concat 实现相同的未突变 状态。相反。

您可能发现以下方法更简洁。

使用 Array.prototype.concat:

addElementToList() {
  const i = this.state.items.length;
  const   newState = ()=> { 
    items: this.state.items.concat([this.state.field]);
  }
  this.setState = newState;
}

使用 ES6 传播语法:

addElementToList() {
  const i = this.state.items.length;
  const   newState = ()=> { 
    items: [...this.state.items, this.state.field];
  }
  this.setState = newState;
}

---

用于比较的原始 OP 代码片段:

它使用不变性帮助程序库 ( https://github.com/kolodny/immutability-helper )

addElementToList() {
  const i = this.state.items.length;
  const newState = ()=> {
    update(this.state,
      {
         items: {
           $push: [
              {
                 [i]: this.state.field
              }
           ]
        }
      }
    )
  };
  this.setState = newState;
}