在 javascript 中动态推送即将到来的 ID 和值

Question

这个问题可能看起来有点令人困惑所以让我解释一下情况，我有一个类别字段，当它被选中时，我会根据该类别从 api 获取数据，例如当您选择类别时A，您可能会得到 id 的 1 到 3，或者当您选择类别 B 时，您会得到 id 的 8 到 11，所以我想做的是创建一个 Filter 数组，用 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：

const FilterPush = (e) => {
      let id = e.currentTarget.getAttribute("id")
      const filter = {
           id,
           value: e.currentTarget.value
       }
       Filters = Filters.filter(item => item.id !== id) // filter out existing id
       Filters.push(filter)
}

Answer 2

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

const FilterPush = (e) => {

    let id = e.currentTarget.getAttribute("id")
    const filter = {
        id: e.currentTarget.getAttribute("id"),
        value: e.currentTarget.value
     }

     Filters.map(item=>{
         if(id == item.id){

             available = true;

         }
     })
    if(!available){
        Filters.push(filter)

    }

}

在 javascript 中动态推送即将到来的 ID 和值

push dynamically coming id's and value's in javascript

javascript

arrays

push

reactjs