在React状态下使用Set数据结构

小编典典

在React状态下使用Set数据结构

reactjs

是否可以Set在React中使用ES6的数据结构？

例如，如果我有一个由不同项目组成的清单，并且我想保持每个项目的检查状态。我想写这样的东西：

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

    this.state = {
      checkedItems: new Set()
    }
  }

  addItem(item) {
    //...?
  }

  removeItem(item) {
    //...?
  }

  getItemCheckedStatus(item) {
    return this.state.checkedItems.has(item);
  }

  // More code...
}

我知道Set本质上是可变的，并且在更新组件时React会进行浅表比较，因此它可能希望传递不可变的对象并将其保持在状态中。但是，有没有办法将Set对象保持和保持在该状态？

阅读 585

2020-07-22

共1个答案

小编典典

由于react仅在状态属性被替换且未突变（浅比较）的情况下才能识别状态更改，因此您必须从旧属性中创建一个新的Set并将更改应用到其中。

这是可能的，因为new Set（oldSet）！== oldSet。

const oldSet = new Set([1, 2]);

const newSet = new Set(oldSet);



console.log(oldSet === newSet);

这是您在课堂上使用它的方式：

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

    this.state = {
      checkedItems: new Set()
    }

    this.addItem = this.addItem.bind(this);
    this.removeItem = this.removeItem.bind(this);
  }

  addItem(item) {
    this.setState(({ checkedItems }) => ({
      checkedItems: new Set(checkedItems).add(item)
    }));
  }

  removeItem(item) {
    this.setState(({ checkedItems }) => {
      const newChecked = new Set(checkedItems);
      newChecked.delete(item);

      return {
       checkedItems: newChecked
      };
    });
  }

  getItemCheckedStatus(item) {
    return this.state.checkedItems.has(item);
  }

  // More code...
}

2020-07-22