[cagedindreams]

Generowanie nowej listy działa i wyświetla się ona poprawnie.
Jednak po zmianie konkretnego elementu nic się nie dzieje, jednak w konsoli widać że jest on zmieniony.
Ktoś wie dlaczego tak jest i jak to poprawić?
#react #javascript

[Marmite]

@cagedindreams: dodaj do li atrybut key, tylko musi być ustawiony na unikalną wartość (nie może to bym index w tablicy jeśli planujesz ją zmieniać)

[lobo]

@cagedindreams: Musisz zrobić 2 rzeczy:
-wszystkie li w map muszą mieć key z unikalną wartością (dokładnie to co powiedział @Marmite)
-w setNumbers musisz przekazywać nowa tablice zapis
var newNumbers = numbers nie tworzy nowej tablicy tylko tworzy nową referencje do istniejącej tablicy. Powinieneś zrobić np. coś takiego
setNumbers([...numbers])

[cagedindreams]

@Marmite: @lobo: Dobra panowie działa. Ogólnie to setNumbers([...numbers]) wystarczyło ale rozumiem że zawsze trzeba dawać key przy mapowaniu.
Pytanie jeszcze mam czy coś takiego jak key={number.id} wystarczy skoro indexu nie mogę dawać?
Jeszcze jedno rozwiązanie z key znalazłem na stacku żeby po prostu użyć React.Children.toArray.
Wielkie dzięki za pomoc. Z tą referencją sam powinienem się domyślić xD

[lobo]

@cagedindreams: Ogólnie to key w map musi być w zasadzie zawsze, dodatkowo musi jednoznacznie identyfikować wiersz w tablicy. Technicznie jeżeli tablica nie zmienia kolejności, ani nie są z niej usuwane elementy może używać indeksów jako kluczy. Jeżeli jednak elementy mogę zmieniać kolejność bądź być kasowane to albo muszą być identyfikowane przez ich unikalną wartość (np. tablica nie ma powtarzających się wpisów) albo tworzysz tablicę typu:
[{
id: 'xx',
value: ''
}]

[wybacz]

@lobo:

setNumbers([...numbers])

czemu nie po prostu

setNumbers(numbers)

[lobo]

@wybacz: bo w takim wypadku nie zmieniasz referencji :)

[lobo]

@wybacz: Masz mały przykład: https://codesandbox.io/s/crazy-wu-icjs30

aby wywołać zmianę stanu nowa wartość musi się różnić od starej, przez różnić mam na myśli
nowa zmienna !== stara zmienna

co w przypadku arr2 jest niespełnione bo zmienna arr2 dalej jest dokładnie ta samą zmienną, co prawda doszły do niej nowe wartości, ale referencja samej zmiennej się nie zmieniła zobacz sobie coś takiego

var a = [1];
var b = a;

b.push(2);

console.log(a, b); //[1,2],

[ZaczynamOdNowa]

@lobo: a jakie to ma znaczenie? Przy rerenderze przeciez funkcja utworzy sie na nowo.

[lobo]

@ZaczynamOdNowa: Ale sama funkcja nie ma znaczenia referencje dla zmiennych tworzonych przez useState się nie zmieniają. Dopieru użycie settera z useState [val, setteter] = useState(), zmienia referencje

[lobo]

@ZaczynamOdNowa: Zobacz sobie ten test https://codesandbox.io/s/naughty-frost-74jl04?file=/src/App.js

kliknij następująco:
-test ref
-dodaj do arr2
-test ref
-dodaj do arr
-test ref

zobacz, że rerender następuje dopiero jak klikniesz dodaj do arr bo tylko w tym wypadku referencja się zmieniła, tak samo zobaczysz, że tylko porównanie arr === test będzie skakało z false/true zależnie czy przed kliknięciem test ref nacisnąłeś dodaj do arr, bo jeżeli nie to będzie zawsze true (oprócz pierwszego kliku

[wybacz]

@lobo:

a spoko, spojrzalem tylko na ta jedna linijke i myslalem, ze numbers to jakas lokalna tablica ( ͡º ͜ʖ͡º)

[ZaczynamOdNowa]

@lobo: a widzisz, myślałem tak jak @wybacz ze to jakas tablica w scopie tej funkcji, nie uwaznie zerknalem na ten przykład a Twojego komentarza nie bylo jeszcze jak ja napisalem. Spoko, ze opisałeś, rozjaśni tym co mają wątpliwości ( ͡° ͜ʖ ͡°)