Почему React не перерисует дерево при изменении state?

Question

[John Developer]

Я учу React и пока на начальной стадии.
Для практики пытаюсь сделать маленькую копию To Do List приложений.
Вот мой git реп.: https://github.com/GeorgeRudenko/my_app_todo

Суть в том, что у меня есть функция которая добавляет новую задачу, сама функция работает но только если её вызвать перед изначально отрисовкой страницы. Как вариант, я попробовал сделать отдельный файл который отвечает за отрисовку и попробовал обращаться к нему при выполнении функции добавления новой задачи, но саму страницу\компоненты не перерисовывает если я добавляю новую задачу со страницы... но сам state изменяется и я это проверяю через console log.

Файл state в себе хранит сам state и функцию добавления задачи, путь к нему ./src/Redux/state
Функцию на странице я вызываю в ./src/App/Control/components/Column/Control.jsx

Где моя ошибка?

Comments

[Lynn «Кофеман»]

https://redux.js.org/faq/immutable-data#why-is-imm...

Вы никогда не должны изменять объекты, только создавать и возвращать новые.

[John Developer]

Алексей Тен, постараюсь почитать то, что Вы рекомендуете. Но не могли бы еще чуть чуть пояснить... Я правильно понял, со стороны React менять компоненты я не имею права, он это делает сам при изменении данных? И для того, чтобы я мог сделать "отрисовку" компонент с новой задачей, мне надо внедрить в проект Redux?

[hzzzzl]

John Developer,
state.tasks.push(newCard);
после этого массив state.tasks остается тем же (указатель на массив один и тот же), как итог реакт не в курсе, что что-то поменялось

я немного запутался в коде, но "если всё работает как должно быть в react/redux", то

const newTasks = [...state.tasks]
newTasks.push(newCard);
state.tasks = newTasks // указатель на новый массив

[John Developer]

hzzzzl, спасибо большое, буду пробовать Ваш вариант!

[abberati]

hzzzzl, state вообще нельзя мутировать.

setState(state => ({ ...state, tasks: [ ...state.tasks, newTask]})

[hzzzzl]

abberati, я догадываюсь об этом, но там "самописный редукс"
https://github.com/GeorgeRudenko/my_app_todo/blob/...

[John Developer]

hzzzzl, а как лучше учиться работать с React? Просто "самописный редукс" теперь меня смущает, что я делаю что-то сильно неправильно и в дальнейшем это мне аукнется

[John Developer]

abberati, мне выдает ошибку.

./src/Redux/state.js
Line 47:5: 'setState' is not defined no-undef

Search for the keywords to learn more about each error.

[hzzzzl]

John Developer, я бы или перенес все данные в стейт App.jsx, и оттуда прокидывал дальше в пропсы - тогда бы всё само по себе обновлялось после setState(), ну или взял бы готовый react-redux, он не такой сложный для таких задач :)

[John Developer]

hzzzzl, Вы меня озадачили тем, что стейт в App.jsx будет обновляться при setState, посмотрю, спасибо большое!
И думаю, посмотрю на счет react-redux, пригодится в любом варианте.

[Lynn «Кофеман»]

Мне кажется, для начала вам стоит вдумчиво пройти туториал с пониманием на каждом шаге что и для чего делается
https://reactjs.org/tutorial/tutorial.html

[John Developer]

Алексей Тен, понял, сделаю. Спасибо Вам!