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

【问题标题】：JavaScript logic problem with dynamically deleting component动态删除组件的JavaScript逻辑问题
【发布时间】：2021-09-28 11:24:03
【问题描述】：

我正在映射数组中的值以创建时，只有最新创建的会被删除。这是因为传递给 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);
  }

【问题讨论】：

标签： javascript arrays reactjs react-native dynamic

【解决方案1】：

最简单的方法可能是将 custom(data) 属性添加到该 button 标记并将其设置为 key 并使用 delete 函数中的 event 对象读取该属性

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

【讨论】：

【解决方案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] 使其不直接编辑状态

【讨论】：

感谢您的解决方案。我有一个跟进。这是我的数组的结构。 AdditionQueryArray: [{key: "key", operator: "and/or", field: "field", property: "property", PropValue:"Propvalue", }]。使用您当前的代码，我收到错误消息： this.state.additionQueryArray 不可迭代。你知道修复吗？谢谢
对不起，我想我在复制你的数组时有错字。在删除函数中应该是 this.state.AdditionQueryArray 而不是 this.state.additionQueryArray