* Предполагается, что вы имеете базовое представление о React.js, состоянии, свойствах и fetch (); в JavaScript.
Последние пару месяцев я действительно глубоко погрузился в основы JavaScript, чтобы повысить уровень своих знаний о веб-интерфейсе. Flatiron была потрясающей программой, и я многому научился, но как бы вы ее ни нарезали, 3 недели на JavaScript и 3 недели на React.js - это не так уж много времени, чтобы изучить фронтенд-разработку. Было здорово научиться складывать вещи вместе, но я действительно сосредоточился на том, почему вещи работают именно так, особенно в JavaScript. С учетом сказанного, я, наконец, начал изучать старые проекты, и я поражен тем, насколько полезно было укрепить мои основы JavaScript для React. Одним из примеров этого является то, как я решил перевернуть список.
Я создал довольно простое веб-приложение для писателей, у которых есть блок писателей, чтобы публиковать быстрые аннотации и истории, которые приходят в голову после появления случайно сгенерированных подсказок. Я создал свой бэкэнд с Rails и использовал fetch(); запросы для обновления своих сообщений. Довольно простое приложение. Моя проблема заключалась в том, что при отправке я хотел, чтобы мое сообщение обновлялось не внизу страницы, а вверху.
Всякий раз, когда я обновлял свои сообщения, сообщение отправлялось и обновлялось должным образом, но в реальной ситуации, почему мне нужно, чтобы мое последнее сообщение было внизу страницы? Подумайте о Twitter, Facebook, Tumblr, Reddit и т. Д.… Сообщения обновляются не в нижней части страницы, а в верхней! Вот где всеобщее внимание! Итак, я решил заставить его работать.
Полное раскрытие информации: я не уверен, что сделал это наилучшим образом. Фактически, мне сказали, что было бы лучше обновить логику на моем сервере Rails, чтобы это работало. Но мои аргументы в пользу того, чтобы сделать это во внешнем интерфейсе, заключались в том, что, возможно, я мог бы оказаться в ситуации, когда мне может потребоваться обновить информацию на основе самых последних данных, обновленных до состояния, и у меня нет доступа к бэкэнду, или, может быть, мне нужна последняя информация. из API, над которым у меня нет контроля. Что бы я тогда делал? Сначала давайте взглянем на базовую настройку того, что у меня было.
Как видите, в первую очередь я создал собственный хук для своих запросов на выборку. В этом случае я получаю данные из своих сообщений и передаю их в качестве опоры в контейнер для сообщений. Оттуда я сделал довольно стандартный .map (); для отображения моих сообщений.
На первом изображении выше вы можете увидеть, что было отображено. Отлично! Я получил свои сообщения для отображения, мои сообщения об ошибках эффективны, и если загрузка занимает слишком много времени, я также получаю сообщения о загрузке. Но это все еще не то, что я хотел. Я решил, что, поскольку самые последние сообщения доходят до конца моего набора реквизитов, я могу просто отменить его, и все будет гладко!
Хотя, конечно, все было не так просто. Я думал, что простой reverse(); на .map(); будет работать, но на самом деле он не отменял мои сообщения, хотя когда я это делал console.log();, он показал, что .map отменяется.
После мозгового штурма и небольшого легкого (* кашель * совсем не горит * кашель *) чтения я полностью забыл, что свойства в React неизменяемы. Простой .map(); обычно не является проблемой, потому что это всего лишь быстрая итерация массива данных, но когда я пытался перевернуть свой массив, я, по сути, пытался манипулировать самими реквизитами. Чтобы обойти это, я использовал удобный оператор распространения и создал неглубокую копию моего реквизита.
Там, где я изначально делал posts.reverse().map((post) => . . . ) в строке 16, я вместо этого изменил posts на [...posts], и это сработало как шарм!
Теперь мой код выглядит так:
Так почему это работает?
Я раньше видел и работал с операторами разбрасывания, но не чувствовал себя очень комфортно и не знал, что я делаю и почему. Насколько я понимаю, мой первоначальный метод реверсирования постов заключался в попытке манипулировать самими ({posts}) реквизитами, что является большим запретом. Создав неглубокую копию данных, React смог манипулировать ею, а не изменять неизменяемую информацию. И при этом мои сообщения были правильно перевернуты как в консоли, так и в отображении :)
Я уверен, что есть более эффективные способы решения этой проблемы, и если у вас есть предложения, дайте мне знать! Счастливых друзей по программированию.
