Verwenden einer Set-Datenstruktur im React-Status

Question

Ist es möglich, die Datenstruktur von ES6 Set in React zu verwenden?

Zum Beispiel, wenn ich eine Checkliste habe, die aus verschiedenen Elementen besteht, und ich möchte den geprüften Status jedes Elements beibehalten. Ich möchte so etwas schreiben:

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... 
} 

ich es verstehen, ein Problem mit der Tatsache sein, dass ein Set von Natur wandelbar ist, und Reagieren führt einen flachen Vergleich, wenn die Komponente zu aktualisieren, so dass es erwartet unveränderlich Objekte, die in den Zustand übergeben und gehalten werden sollen. Gibt es jedoch eine Möglichkeit, ein Set-Objekt in dem Zustand zu halten und zu verwalten?

Answer 1

Da nur Zustandsänderungen identifizieren reagieren, wenn das Staatseigentum wurde ersetzt, und nicht mutierte (flache vergleichen) , müssen Sie ein neues Set aus dem alten erstellen, nachdem Sie die Änderungen übernommen haben.

Dies ist seit dem neuen Set (oldSet)! == oldSet möglich.

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

 
console.log(oldSet === newSet);

Und das ist, wie Sie es in Ihrer Klasse verwenden:

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... 
} 

Answer 2

state ist nur ein gewöhnliches Objekt, Sie können halten, was immer Sie wollen. Sie können die Lifecycle-Methode überschreiben, um sie selbst zu implementieren. Sie können Ihre eigene Logik verwenden, um herauszufinden, ob die Komponente aktualisiert werden muss oder nicht. Sie brauchen Ihr Set nicht einmal zu nisten, können Sie es einfach direkt eingestellt, wie die state:

this.state = new Set();