• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Usunięcie elementu z tablicy {JS}

VPS Starter Arubacloud
0 głosów
282 wizyt
pytanie zadane 21 listopada 2022 w JavaScript przez chrystian Gaduła (4,780 p.)

Mam funkcje która usuwa object{note.id,body:"text"} z tablicy 

Mam dwa sposoby, żaden nie działa pierwszy, wszystkie usuwa elementy, oprócz pierwszego 
 

function deleteNote(index) {
		setNotes((newNotes) => {
			return newNotes.filter((note) => {
				return note.id === index;
			});
		});
	}

drugi  z błedem Each child in a list should have a unique "key" prop

function deleteNote(index) {
		setNotes((newNotes) => {
			return newNotes.map((note) => {
				return note.id === index ? newNotes.splice(index, 1) : note;
			});
		});
	}

funkcja jest przesyłana jako prop 

<Example delete={deleteNote} />

i w componencie jest przycisk 

	<button key={note.id + 20} onClick={() => props.delete(note.id)}>
					delete
				</button>

 

1 odpowiedź

+1 głos
odpowiedź 21 listopada 2022 przez Wiciorny Ekspert (269,120 p.)
 setNotes((newNotes) => {
            return newNotes.filter((note) => {
                return note.id === index;
            });
        });

filtrujesz tablice wszystkich twoich elementów i sprawdzasz czy index = id, więc podejrzewam, że skoro przechodzisz przez każdego - > to na pewno twoje ID są większe od 0 ( a index jest liczony od 0) więc pierwszy się usuwa, natomiast kolejne elementy mają id 1.... n ( n- liczba elementów), więc pewnie i na takich indeksach bedą ... stąd fitler zwraca Ci pozostałe elementy. 

Natomiast druga sprawa robisz 

key={note.id + 20} 

nie jest unikalne, czyli występuje tutaj kilka takich samych kluczy

Twoje wiersze w tablicy JS powinny mieć unikalną wartość KEY- klucza. Pomoże to ReactJS znaleźć odniesienia do odpowiednich węzłów DOM i zaktualizować tylko zawartość która jest wewnątrz znaczników. 

W drugim przypadku dalej zwracasz kilka elementów przez to , żę note.id === index nie jest tylko sprawdzane dla 1 elementu ale dla calej tablicy i dla każdego elementu z tablicy robisz  splice- i wydaje mi się ze nie do konca wiesz co się wtedy dzieje 
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

Splice nie zwróci Ci usuwanego elementu, ale zwraca Ci całą tablice bez tego co usuwasz. 

const dataNr = ['1', '2', '3', '4'];
dataNr.splice(1, 1);
// index = 1 , element 1 
console.log(dataNr);
//> Array ["1", "3", "4"]

 

Podobne pytania

0 głosów
0 odpowiedzi 216 wizyt
pytanie zadane 15 maja 2022 w JavaScript przez chrystian Gaduła (4,780 p.)
0 głosów
0 odpowiedzi 210 wizyt
0 głosów
2 odpowiedzi 635 wizyt

92,455 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...