react, zmiana stanu działa jeżeli użyję operatora przypisania

Question

Witam

Mam taki kod

  const [startDate, setStartDate] = useState(null);
    const [newTask, setNewTask] = useState(initTask)


    const handleChange = (e) => {
        if (e.target.id === 'newTask') {
            // newTask.title = e.target.value
            setNewTask({
                ...newTask, title: e.target.value
            })

dlaczego mi to nie działa? jeżeli odkomentuję 4 linijkę od końca a zakomentuję 3 ostatnie kod działa, ale nie powinno się zmieniać stanu poprzez operator przypisania

proszę o pomoc

Comments

Funkcja App jest cyklicznie wołana w setInterval z komponentu countDown, dlatego w konsoli widać spam console.log-ów.

Nie wiem dlaczego aktualizacja state dla newTask nie uwzględnia property title, bo o dziwo property id (ustawiane na końcu funkcji handleChange) jest uwzględniane.

Sprawdziłem w debuggerze i nawet użycie setNewTask z funkcją aktualizującą stan nie pomaga, więc nie wiem o co chodzi. Może to kwestia specyficznego użycia setInterval z Reduxem, albo jakiś corner case lub niezrozumienie Reacta.

---

Sprawdzałeś, czy aktualizacja state-u newTask w pozostałych ifach działa - tzn. czy wypełniając pozostałe pola formularza, to jest brane pod uwagę w state?

---

i tu jest cała zagwózdka bo

wszystkie trzy point, flag i id działają stan się zmienia a

title, notes, alarm.setAlarm i alarm.iconOn nie działają 

i wszystkie są w tym samym handleChange !!!! skąd taka wybiórczość?! 

---

Szczerze mówiąc nie wiem. Próbując modyfikować kod przez debugger, zauważyłem że dowolna inna zmiana w pliku App.js nie powoduje efektu, bo to zmiany na source mapie, a oryginalny kod pozostaje bez zmian.

Spróbuj aktualizować stan przez callback, na zasadzie:

setNewTask((previousState) => ({
  ...previousState, title: e.target.value
}));

Jeśli to nie pomoże, to nie wiem o co chodzi. Niemniej, odświeżanie całego komponentu w setInterval może nie być dobrym pomysłem. Raczej powinno się odświeżać określone wartości, np. licznik lub czas (jeśli to zegarek).

---

w każdym razie bardzo dzięki za poświęcony czas

---

wiem w czym problem!!! 

wystarczyło przenieść tę linijkę

setNewTask({
            ...newTask, id: new Date().getTime()
        })

w miejsce gdzie będzie uruchamiana tylko raz ponieważ, wcześniej była wywoływana bezwarunkowo za każdym wywołaniem handleChnage i to wszystko mieszało...