reactjs - 反应删除多个项目

Question

我有一个可以通过按下按钮删除的项目列表，如随附的屏幕截图所示。

第一次删除任何项目都可以正常工作，但是当我尝试删除另一个项目时，它将无法正常工作，因为组件从先前删除的项目中接收数据。

这是我的代码：
父组件

onDeleteClick(config, e) {
  // it removes the item at the first time
  // on the second try the received config parameter is the same as before
  this.props.deleteConfigAction(config.configId)
  .then(res => {
    ...
  })
  .catch(err => {
    console.log(err)
  })
}

<Flexbox  marginTop='20px' flexDirection='column'>
  {this.state.configurations.map((config, index) => {
    let boundDeleteClick = this.onDeleteClick.bind(this, config);
    return (
      <ConfigCardView
        key={`item-${index}`}
        handleRemove={boundDeleteClick}/>
    )
  })}
</Flexbox>

ConfigCardView零件：

...
<button onClick={(e, config) => this.props.handleRemove()}>Delete</button>
...

我无法弄清楚我错过了什么......

---

更新
我已通过configurations在删除项目后更新 state 属性来修复：

  this.props.deleteConfigAction(config.configId)
  .then(res => {
    ...
    this.setState({configurations: newData})
  })

标签： reactjs