Я потратил пару дней, слишком много чашек кофе, подумал о том, чтобы сделать стрижку, чтобы впустить больше воздуха в голову, потому что, помимо прочего, я подозревал, что некоторый перегрев мозга вносит свой вклад в проблему, с которой я столкнулся; компонент, который становится недоступным после однократного обращения - как это казалось в то время.
Немного предыстории
Маршрутизатор React спасает жизнь при работе с одностраничными приложениями (SPA). Объединитесь с Redux, и вы станете таким могущественным и непобедимым. Добавьте крючки, и мальчик, вы в ударе. И если вы пишете код, как я, то есть пишете как можно меньше строк кода, вы начинаете задаваться вопросом, почему люди говорят так мало, используя слишком много строк кода. Я сторонник разделения интересов и парадигмы единственной ответственности, однако ...
…. Мой код должен быть чистым! Очень чистый для чтения. Я думаю, что это обычная вежливость для следующего программиста-печенья, которая приходит через 48 минут после того, как вы покинули должность / роль, чтобы не терять рассудок, пытаясь прочитать ваш код, а затем выяснить, что, черт возьми, каждая процедура, переменная, объект, компонент и т. д. делает. На самом деле, первым бенефициаром этой любезности были бы вы, когда по какой-то причине они вернули вас к проекту, который вы оставили умирать 2 года назад, что в эпоху разработки программного обеспечения могло также быть из прошлого тысячелетия. Я поймал себя на том, что переписываю свои коды, если вернусь к ним несколько месяцев спустя, и у меня уйдет больше 3 минут, чтобы все разместить.
А теперь вернемся к теме. Реагируйте на роутер. Я так много использую withRouter функциональность. Я не могу вспомнить, когда в последний раз использовал NavLink или даже redirect.. Я толкач, и мне известно, что я отбрасываю запросы маршрутизации в местах, которые заставляют людей произносить трехбуквенные слова, рифмующиеся со словом «что за камень», а затем добавлять: «Я не делал этого». даже не знаю, что это было возможно ». Кроме того, пытаясь свести количество строк кода к минимуму, я обычно использую push в качестве обратного вызова для eventListeners, и именно из-за этого у меня в последнее время возникли проблемы.
push выглядит примерно так push('path-name'). В зависимости от того, как вы добавили push функцию в компонент, она либо такая же, как у вас выше, либо вы добавляете history часть этой функции, что-то с эффектом props.history.push('path-name') для функциональных компонентов или this.props.history.push('path-name') для компонентов класса. В случае eventListener, скажем, на кнопке, это выглядит примерно так;
<button onClick={() => push('/candyland')} > Go to candyland </button>
Здесь происходит несколько вещей.
- Очевидно, это обратный вызов.
- Это стрелочная функция. Еще один очевидный факт.
- Это вызов функции - часть, которая меня достала.
Удалите () =>, и вы получите вызов функции как обратный вызов, что-то, что я обнаружил на собственном горьком опыте, может быть обломом.
Что случилось со мной?
Итак, после примерно 8000 строк кода (самый крупный участник исходил от меня, отказавшись использовать пакеты npm для выбора стран, штатов и городов и вместо этого решив создать функцию самостоятельно!), И файл действий redux, который получил более 1000 В какой-то момент, несмотря на то, что я пытался сохранить как можно более сжатые данные, не жертвуя удобочитаемостью, одна строка кода нарушила всю цель моего приложения. Это должно было быть что-то вроде a job search result is displayed by cards with minimal info >> you click on a card and see detailed info on that job listing, тогда, когда вы находитесь в отдельном списке вакансий, вы сможете вернуться к job search results и посмотреть другие варианты. Вместо этого;
<button onClick={() => push('/candyland')} > Go to candyland </button>
У меня было это;
<button onClick={push('/candyland')} > Go to candyland </button>
Проблема не сразу очевидна, особенно когда эта кнопка скрыта в компоненте с более чем 160 строками кода, но то, что происходило, было в последующих попытках доступа к этому компоненту, приложение ускорило его отрисовку и вернулся на страницу результатов поиска. Это было неочевидно.
Как я вернул свой паз.
Итак, через пару дней, которые включали переписывание всего кода приложения, длительные прогулки и посещение тренажерного зала, чтобы очистить голову между этапами кодирования, я решил взять выходной в приложении. Я только что смотрел музыкальных конкурсов American Idol и The Voice, а также огромное количество клипов Стива Харви «Семейная вражду» на YouTube, готовил мне несколько хороших традиционных блюд и, по сути, просто пытался перезагрузить свое сознание. Затем перед я вернулся к проблеме, лег на кровать и воспроизвел сценарии, которые привели к этой проблеме, сформулировал пару теорий, записал их на бумаге и приступил к проверке app, чтобы увидеть, какой сценарий применим, и, наблюдая за адресной строкой, я видел мерцание каждый раз, когда я щелкал плитку карточки вакансии, и она щелкала - приложение фактически достигало этого компонента. Я начал какой-то анализ рыбьей кости и метод устранения вероятной причины. Я комментирую коды, чтобы узнать, когда он перестанет ломаться. Так я узнал, что все остальные кнопки возврата работают нормально, пока не будет нажата определенная кнопка возврата. И при ближайшем рассмотрении, включающем масштабирование и другие махинации, я почувствовал себя глупо, не заметив этого за 5 минут! С этого момента разработка приложений продолжалась, но теперь я знал, что не стоит связываться с функцией стрелки, когда push.
В общем, я научился старому трюку сделать шаг назад, чтобы увидеть перспективу.
