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

Question

我正在映射数组中的值以创建 < select> 下拉列表。我希望能够动态地创建和删除它们。我已经弄清楚了创建（使用映射），但我遇到了删除问题。我在数组中使用一个键来区分值，但我的问题是当我去删除一个特定的 < select> 时，只有最新创建的被删除。这是因为传递给 delete 方法的密钥是最新创建的密钥（第 2 行：let key = array.key;）。什么是变通解决方案，可以让我在保留第 2 行的同时将正确的密钥传递给删除方法。希望这是有道理的。谢谢

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

{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

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

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

Answer 2

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

如果您正在使用索引，您可以使用过滤器将其排除。例如

{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] 使其不直接编辑状态

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

JavaScript logic problem with dynamically deleting component

javascript

arrays

dynamic

reactjs

react-native