Reactjs Can’；t从反应状态集合中删除项

我在React组件中定义了以下两种方法：

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 });
}

向

this.state.metrics

添加新值可以正常工作，但删除：

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

---

…因此，至少集合在本地更新。

您需要将其复制到新对象

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

---

应该有效。

键名是否正确？以及console.log（'handleremovemetrics'，keyName，updatedMetrics）的结果包含删除的密钥？@MayankShukla很好。我包括了上面的控制台输出。看起来该集合似乎是在本地更新的，但未处于

状态

。您需要将其复制到新对象<代码>常量度量={…this.state.metrics，[keyName]：未定义}；this.setState（{metrics}）应该可以工作。您如何检查状态未更新？@vijayst谢谢！成功了！我改为

constupdateMetrics={…this.state.metrics，[keyName]：null}因为我正在使用Firebase，但现在它可以工作了。请加上一个答案，我会投你一票。
const metrics = { 
  ...this.state.metrics, 
  [keyName]: null 
}; 
this.setState({ metrics });