reactjs - 删除数组中的特定值并添加新的更新值

Question

我试图在添加或推送另一个更新值之前删除数组中现有的特定值。我的目的是避免重复相同的 id 和 value 到数组。我想要实现的是当 onchange 触发时检查该值是否存在于数组中，如果存在则删除旧值并推送更新值。

  const [array, setnewarray] = useState([]);
     function handlechangeselected(val,id){

       var newarray = array;
       const valueToRemove = id;
       newarray.filter(item => item.id === valueToRemove);

        newarray.push({ value: val, id:id });
       setnewarray(newarray);

  }




  <select                                                                              
   onChange={(e) => handlechangeselected(e.target.value,row.ID)}                                                                                
  >

      <option value="0">0</option>                                                                             
      <option value="1">1</option>                                                                           
      <option value="2">2</option>

  </select>

标签： reactjs

Answer 1

第一个问题是filter不修改数组，而是返回一个新数组。您没有使用返回的数组，因此newArray未更改。

另一个问题是filter过滤掉任何从回调中返回false的值，因此您希望过滤器为任何不匹配的项目返回 true valueToRemove（换句话说，!==而不是===）。您也可以使用.concat链接后array.filter。

在这里，稍微简化一下：

     const [array, setNewArray] = useState([]);

     function handlechangeselected(value, id){
       const newArray = array
         .filter(item => item.id !== id)
         .concat({ value, id });

       setNewArray(newArray);
     }