在javascript中动态推送ID和值

Question

这个问题似乎有点令人困惑，所以让我解释一下情况，我有一个类别字段，当我选择该类别字段时，我会根据该类别从api获取数据，例如，当您选择类别A时，您可能会获得ID的1到3或当您选择类别B时，您得到的ID为8到11，所以我想做的是创建一个过滤器数组，该数组将这些值与ID推入，因此当用户在输入中键入类似sth ID为1，此对象被推送到数组，如下所示：

Filters = [ 
   {
     id:1,
     value: sth
   }
]

所以我基本上完成的工作是这样的：

this.props.Filters.map(item => (
     <div className="from" key={item.id} id={item.id} >
          <span className="title">{item.feature}</span>
          <input type="text" placeholder="..." id={item.id} onChange={FilterPush}></input>
     </div>
))

并且功能是：

const Filters = []
const FilterPush = (e) => {
      const filter = {
           id: e.currentTarget.getAttribute("id"),
           value: e.currentTarget.value
       }
       Filters.push(filter)
}

我遇到的问题是，每当用户键入将对象推到Filters的内容时，因此，当用户尝试键入sth时，Filter等于：

Filters={
    {id:1,value:s},
    {id:1,value:st},
    {id:1,value:sth}
}

但是我希望它等于这个

Filters={
    {id:1, value:sth}
}

[请记住，ID是动态的，我不知道，而且不仅有一个输入，我的意思是我们可以将3个具有不同ID的输入发送给服务器。

Answer 1

仅过滤掉现有的ID：

Answer 2

非常简单，只需在推送元素之前检查推送元素的id是否已在Filters数组中。