Я начал работать с React, и школа Flatiron дает своим ученикам возможность попрактиковаться в упражнении под названием «Суши-сага».
GIF дает представление о том, как это должно работать. У пользователя/клиента есть определенная сумма денег, которую он может использовать, нажав на суши. Тарелка должна появиться на столе, а деньги клиента должны уменьшиться на стоимость суши, на которую кликнул пользователь. Суши-тарелки поступают с фиктивного сервера, и на этом сервере есть 100 суши. Нажатие кнопки «Еще суши» должно переключаться между суши. В конце концов, пользователь вернется к началу списка суши. Дополнительным бонусным заданием было оставить суши съеденными, если пользователь уже нажал на них.
После того, как основные результаты были выполнены, я решил попробовать дополнительную задачу: съев суши, остаться съеденным после того, как пользователь просмотрит все тарелки с суши.
Каждая тарелка суши была представлена компонентом под названием «Суши», который хранился в «контейнере для суши». Я решил, что компонент контейнера будет отслеживать, какие тарелки суши были съедены, а компонент «Суши» будет проверять, какие тарелки были съедены, чтобы увидеть, будут ли они отображаться или нет.
Контейнер собирался использовать состояние для хранения массива идентификаторов съеденных тарелок суши. Первоначально это было установлено в пустой массив в строке 8.
Массив eatenSushi и функция setEatenSushi передаются каждому компоненту суши.
Пока я не решил взять на себя эту дополнительную задачу, состояние «beenEaten» было жестко запрограммировано как ложное, пока оно не было изменено функцией «handleEaten». Эта функция срабатывает после нажатия на суши. Он отвечал за исчезновение суши с тарелки, вычитание денег пользователя и добавление тарелки на стол. Для этой дополнительной задачи теперь он также отвечал за добавление нового идентификатора съеденных суши в массив идентификаторов съеденных суши. Состояние «beenEaten» теперь зависит от того, содержит ли массив «eatenSushi» идентификатор отображаемых суши.
Если это так, суши не появляются на тарелке, и ничего не происходит, если пользователь нажимает на пустую тарелку. Это показано в строках 30–37.
Это практическое упражнение React было очень забавным, чтобы справиться с проблемами, которые оно представило. Это заставит меня задуматься о том, как состояние дочерних компонентов может зависеть от состояния родительских компонентов и как это можно использовать для решения подобных проблем.
