Блог

У меня есть следующие данные

 const[myData,setMyData]=React.useState([])
React.useEffect(()=>{
 let initialData=[{ email: 'user1@mail.com', date: '22-03-2020' },
   { email: 'user2@mail.com', date: '22-03-2021' },
   { email: 'user3@mail.com', date: '22-03-2021' }]
 setMyData(initialData)
},[])
 

эти данные отображаются в таблице с флажком, и у меня эта функция вызывается каждый раз, когда я нажимаю кнопку (после выбора строк).

 function add(datatoRemove ){
  alert("datatoRemove " JSON.stringify(datatoRemove ) )
  let myArrayFiltered = myData.filter((el) => {
    return datatoRemove .some((f) => {
      return f.email!== el.email
    });
  });
  alert("filtered" JSON.stringify(myArrayFiltered ) )

  setMyData( [...myArrayFiltered ])    
}
 

Проблема в том, что при одном выборе «myArrayFiltered» возвращает остальные 2 строки, и состояние обновляется правильно, но если я выберу две или все строки, ничего не изменится, и в myArrayFiltered будут все 3 элемента.
Что я здесь упускаю?

конечная цель состоит в том, чтобы:

возможный сценарий 1: если

 datatoRemove = [{ email: 'user1@mail.com', date: '22-03-2020' },
       { email: 'user2@mail.com', date: '22-03-2021' },
       { email: 'user3@mail.com', date: '22-03-2021' }]
 

затем

myArrayFiltered=[] а также myData= []

возможный сценарий 2:

 if datatoRemove = [ { email: 'user2@mail.com', date: '22-03-2021' },{ 
email: 'user3@mail.com', date: '22-03-2021' }]
 

затем

myArrayFiltered= [{ email: 'user1@mail.com', date: '22-03-2020' }]

а также мои данные.

Вам нужно использовать это вместо этого

 let myArrayFiltered = initialData.filter((el) => {
  return datatoRemove.every((f) => {
    return f.email!= el.email
  });
});