Kann nicht entfernen Sie Elemente aus einem Zustand Sammlung Reagieren

Question

Ich habe diese beiden in meinem React Komponente definiert Methoden:

handleAddMetric() { 
    const metricKey = prompt('Name/key of metric'); 
    const newMetricItem = { 
     name: metricKey, 
     value: 100 
    } 
    let newMetrics = {}; 
    newMetrics[metricKey] = newMetricItem; 
    const updatedMetrics = Object.assign({}, this.state.metrics, newMetrics); 
    this.setState({ metrics: updatedMetrics }); 
} 

handleRemoveMetric(keyName) { 
    let updatedMetrics = this.state.metrics; 
    delete updatedMetrics[keyName]; 
    console.log('handleRemoveMetric', this, keyName, updatedMetrics); 
    this.setState({ metrics: updatedMetrics }); 
} 

neue Werte zu this.state.metrics Hinzufügen funktioniert gut, aber das Löschen:

<button onClick={this.handleRemoveMetric.bind(this, key)}>Delete</button> 

. .. ruft meine handleRemoveMetric Funktion auf, aktualisiert die Sammlung jedoch nicht.

Ich zuerst war es ein Problem mit this, aber das scheint nicht der Fall zu sein.

Irgendwelche Ideen?

Update: Die Konsolenausgabe ist:

handleRemoveMetric Metrics {props: Object, context: Object, refs: Object, updater: Object, state: Object…}componentWillUnmount: function()context: Objectprops: Objectref: Objectrefs: ObjectsetState: function (data, cb)state: Objectupdater: Object_reactInternalInstance: ReactCompositeComponentWrapperisMounted: (...)replaceState: (...)__proto__: ReactComponent 
"myMetricKey" 
Object {MRR: Object, moneyInBank: Object, wow: Object} 

... so zumindest die Sammlung lokal aktualisiert wird.

Answer 1

Sie müssen es auf ein neues Objekt kopieren.

const metrics = { 
    ...this.state.metrics, 
    [keyName]: null 
}; 
this.setState({ metrics }); 

sollte funktionieren.