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

Question

是否可以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对象？

Answer 1

因为只有在状态属性被替换而且没有变异(浅比较)时,react才会识别状态更改,因此您必须从旧的Set创建一个新的Set,并将更改应用于它.

这是可能的,因为新的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...
}