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

是否可以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对象保持和保持在该状态?

回答:

由于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...

}

以上是 在React状态下使用Set数据结构 的全部内容, 来源链接: utcz.com/qa/412442.html

回到顶部