动态删除组件的JavaScript逻辑问题

Question

我正在映射数组中的值以创建<选择>下拉列表。我希望能够动态地创建和删除它们。我已经找到了创建(使用映射(，但我有一个删除问题。我使用数组中的键来区分值，但我的问题是，当我删除特定的<选择>，只有最新创建的才会被删除。这是因为传递到delete方法中的键是最新创建的键(第2行：let key=array.key；(。有什么解决方法可以让我在保留第2行的同时将正确的键传递到delete方法中。希望这是有道理的。感谢

编辑：下面的解决方案有效，只需确保更新您在状态中映射的组件，否则旧阵列将用于映射

{this.state.AdditionQueryArray.map((array) => {
let key = array.key;
return (
<div>
<Select
onChange={(e) => this.HandleChange(e, key)}
options={this.state.OperatorOptions}
placeholder="Select Operator"
menuPortalTarget={document.body}
menuPosition={"fixed"}
/>
<button onClick={() => this.delete(key)}>Delete</button>
<div> 
)
}

delete(key) {
const state = this.state;
for (var i = state.AdditionQueryArray.length - 1; i >= 0; --i) {
if (state.AdditionQueryArray[i].key == key) {
state.AdditionQueryArray.splice(i, 1);
}
}
this.setState(state);
}

Answer 1

为什么不传递索引而不是键？

如果您正在使用索引，则可以使用筛选器将其排除在外。作为示例

{this.state.AdditionQueryArray.map((array, index) => {
return (
<div>
<Select
onChange={(e) => this.HandleChange(e, key)}
options={this.state.OperatorOptions}
placeholder="Select Operator"
menuPortalTarget={document.body}
menuPosition={"fixed"}
/>
<button onClick={() => this.delete(index)}>Delete</button>
<div> 
)
}

delete(index) {
let tempArray = [...this.state.AdditionQueryArray]
let filteredArray = tempArray.filter((item, arrayIndex) => arrayIndex !== index)
this.setState({
AdditionQueryArray: filteredArray
})

当我想删除列表中的一个元素时，我通常会使用这个。我还添加了[...array]，使其不直接编辑状态

Answer 2

最简单的方法可能是向button标记添加自定义(数据(属性，并将其设置为key，然后在delete函数中使用event对象读取该属性

检查：https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes