在React的狀態下使用Set數據結構

是否有可能在React中使用ES6的Set數據結構？在React的狀態下使用Set數據結構

例如，如果我有一個由不同項目組成的清單，並且我想維護每個項目的檢查狀態。我想寫的東西是這樣的：

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對象？

來源

2017-06-11 mittelmania

由於反應將確定只有當國家財產被換下，而不是突變狀態變化（淺比較），在對其應用更改後，必須從舊的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 }) => { 
     checkedItems.delete(item); 

     return { 
     checkedItems: new Set(checkedItems); 
     }; 
    }); 
    } 

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

    // More code... 
}

來源

2017-06-11 10:43:42

state只是一個普遍的對象，你可以持有你想要的東西。您可以覆蓋shouldComponentUpdate生命週期方法以自行實施。您可以使用自己的邏輯來確定組件是否需要更新。你甚至都不需要你的窩集，你可以直接將其設置爲state：

this.state = new Set();

來源

2017-06-11 10:37:09 Scarysize

在React的狀態下使用Set數據結構

回答

相關問題