Недавно я прошел оценку своего проекта, и мне было поручено отсортировать мои сообщения в порядке возрастания до исходного состояния. Первоначально я думал, что все, что мне нужно сделать, это использовать .sort() для моего массива сообщений, но это было нечто большее, и я объясню почему.

Первоначально мой код выглядел так:

И это также компонент, в котором я реализовал этот новый переключатель/сортировку. Мой мыслительный процесс заключался в том, что, поскольку я уже сопоставляю свои сообщения здесь, чтобы отобразить правильный компонент PostCard, соответствующий пользовательским атрибутам, я могу просто поместить .sort() в строку 12 и отобразить кнопку следующим образом:

Это был момент, когда я попал в тупик. Несмотря на то, что у меня были средства для изменения состояния между каждым нажатием кнопки, мои сообщения на самом деле не отображались. Кроме того, мой ответ содержал много логики, из-за которой было сложно отлаживать ошибки рендеринга. И хотя у меня были правильные реквизиты пользователя для сортировки, этого было недостаточно, чтобы привести функцию в рабочее состояние. Мое условное утверждение также не было правильной реализацией перехода от восходящего к исходному состоянию. Глядя сейчас на свой код, я тоже называл свои методы слишком буквально, я хотел измениться. Просмотрев документацию React, я нашел это:

  1. Условный рендеринг

Используйте операторы JavaScript, такие как if или условный оператор, для создания элементов, представляющих текущее состояние, и позвольте React обновить пользовательский интерфейс, чтобы они соответствовали им.

Я решил использовать этот метод условного рендеринга, чтобы отразить рендеринг моего компонента в соответствии с изменениями состояния. Итак, если бы мое состояние возвращало true, это означало бы, что мои сообщения были отсортированы в порядке возрастания. И если бы он вернул false, он вернул бы исходное состояние и массив.

Состояние можно установить локально в моем компоненте PostCard следующим образом:

Я установил для своего начального состояния значение false, потому что, когда я загружаю свою ленту сообщений, она еще не отсортирована. Только когда переключатель становится истинным, поток сообщений сортируется в том случае, если для этого нажимается кнопка. Я также привязал this в своем конструкторе к методу, отвечающему за внесение изменений в свойства. Я читал об этом и в этой статье на freeCodeCamp. Это также объясняет, как связать это в React и лучшие варианты использования.

Вот остальная логика:

У меня есть метод toggleSort, который проверяет и устанавливает состояние переключения в true или false. Мой метод toggleBtn также возвращает кнопку, отвечающую за onClick, которая запускает этот метод. Таким образом, при каждом щелчке мое состояние будет обновляться с { toggle: true } или { toggle: false }, а затем запускать повторную визуализацию в моем компоненте для сортировки моих сообщений!

Метод getComparator довольно длинный, и мне пришлось потратить время на кодирование. Он проверяет на основе локального состояния переключателя, если щелкнуть в первый раз, он вернет отсортированный массив в порядке возрастания. My (a,b) на самом деле представляет моих пользователей, поэтому я сослался на конкретное свойство Relations.posts.data.length, чтобы указать данные, которые содержат количество сообщений, которые каждый пользователь уже сделал, таким образом, я могу сказать React чтобы показать мне, какой пользователь сделал больше всего сообщений, и отобразить это мне. Строка, следующая за «? 1 : -1», — так будет отсортирован массив в порядке возрастания. Если бы я сделал это как «? -1 : 1», то компонент будет возвращаться в порядке убывания. Причина, по которой он изменяется от 1 : -1 до -1 до 1, заключается в том, что я могу перейти из возрастающего состояния обратно в исходное состояние.

Метод transformProps в основном меняет свойства. У него также есть переменная, которая захватывает this.getComparator(), потому что этот метод теперь является функцией, возвращающей объект. Получив это, мы возвращаем […this.props.users].sort(compare). Если мы не используем оператор распространения для сортировки и просмотра возвращаемого массива, он вернет ошибку:

Причина, по которой эта ошибка была возвращена мне сначала, заключалась в том, что я случайно использовал .map() (ой!), и мой массив пользователей также мутировал из-за моих входящих реквизитов, которые были у меня в моем render(). При каждом рендеринге мой компонент возвращал два массива пользователей, которые мне приходилось сортировать(), дважды щелкнув, чтобы все получилось правильно. При этом это также повлияло на мое состояние, вернув значение, которое не отражает способ рендеринга моего компонента.

Следовательно, использование оператора распространения жизненно важно для того, чтобы сортировка работала. Таким образом, это позволило мне только скопировать массив, а не изменять его в компоненте. Больше никаких двойных щелчков и неточных изменений состояния!

Вот готовый код!

My allPostCards — это метод, возвращающий всю почтовую открытку, которая имеет совпадающие пользовательские атрибуты и отношения публикации, а также кнопку переключения! Возврат также вызывает transformProps, который сообщает React, что если сработает this.toggleBtn(), он будет повторно отображать все состояние и карточки каждого сообщения. Наконец, очищенный код моего рендеринга возвращает this.allPostCards(), который содержит всю логику рендеринга моих сообщений и возможность их сортировки.

Я также сделал свой код чище, увидев в документации React, что на самом деле можно вернуть JSX в методе и просто вызвать его в render() { return(). Это сделало мой код намного чище и избавило мою логику от беспорядка! Отладка этой задачи также стала более полезной, потому что тогда я смог увидеть, в чем заключались проблемы при рендеринге компонента и какой метод вызывал это. Возможно, мне придется вернуться ко всему моему проекту только для того, чтобы провести рефакторинг и сделать мой код более читабельным.

Я надеюсь, что эта информация послужит вам хорошо. Потребовалось много кофе френч-пресса и терпение (с самим собой), чтобы понять, что мне нужно многое изменить. Надеюсь реализовать этот метод кодирования и в своих будущих проектах.

Прочитайте мой предыдущий пост об этом проекте:
https://medium.com/dev-genius/go-local-react-redux-app-72c785adb93

Вот мой репозиторий:
https://github.com/Ro5hi/golocal_react

_____________________________________________________________

Социальные ссылки

ЛинкедИн

Гитхаб

Твиттер

Инстаграм

"YouTube"