Обработка ошибок React
Скомпилированный список ошибок, когда React не компилируется.
Независимо от вашего опыта веб-разработки, будь то десятилетия или месяцы, обработка ошибок - это работа каждого программиста. Я бы предпочел забыть, сколько времени я потратил на отслеживание случайной скобки или недоумевал, почему что-то не определено, когда оно четко определено. При создании моего последнего проекта TrainTrack (приложение React, помогающее пользователю подготовиться к предстоящей гонке) этот красный шрифт, купаясь на серо-черном фоне, злорадствовал надо мной, беспечно говоря: «Эй, ты, я не смог компилировать. "
Чтобы сэкономить часть вашего времени и, возможно, это неприятное ощущение от того, что вы обнаружите, насколько ... простой была ваша ошибка - вот список распространенных причин, по которым React не компилируется. Хотя некоторые из них довольно просты и ясно указывают на проблему, это полезное напоминание о том, что нужно ПРОЧИТАТЬ СООБЩЕНИЯ ОБ ОШИБКАХ. Это то, что мой наставник часто советовал . Часто пытаются метаться взад и вперед, отчаянно пытаясь понять, почему ваше приложение не работает, но не попасться в это колесо хомяка. Остановитесь и прочтите, что милый компьютер пытается вам сказать.
Ошибки синтаксиса
Вы, наверное, слишком долго смотрели на монитор. Ты голоден. Вам нужна вода. Вы потеряли самоощущение. (Хорошо, может быть, это всего лишь мой личный опыт…) Независимо от вашей личной ситуации - вам, скорее всего, понадобится больше времени, чем необходимо, чтобы найти проблему, если вы сразу же погрузитесь в свой код. Воспользуйтесь предоставленными инструментами, снизьте скорость и прочтите сообщение. Синтаксические ошибки помогают нам узнать местоположение файла и строку, в которой произошла ошибка.
SyntaxError: Unterminated regular expression
ПЕРЕВОД: «Вам не хватает закрывающей фигурной скобки»
SyntaxError: Unexpected token, expected “,"
ПЕРЕВОД: «Вы НЕ пропустили запятую, но вы что-то упустили».
Это немного вводит в заблуждение, поскольку вам, скорее всего, на самом деле не нужна запятая. Каждый раз, когда вы видите Unexpected token, я рекомендую сначала проверить, все ли ваши () и {} соединены друг с другом.
SyntaxError: Unexpected token, expected "jsxTagEnd"
SyntaxError: Unterminated JSX contents
ПЕРЕВОД: «Что-то не так с вашим JSX, потому что React не может правильно преобразовать его в HTML, проверьте все ваши <, > и />»
SyntaxError: ‘import’ and ‘export’ may only appear at the top level
ПЕРЕВОД: «Ваш компонент неправильно упакован в {}, поэтому он думает, что вы пытаетесь экспортировать внутри компонента».
Опять же, убедитесь, что все скобки расставлены вместе.
Несинтаксические ошибки
Error: 'ComponentName' is not defined react/jsx-no-undef
ПЕРЕВОД: «Вы пытались использовать компонент, не импортируя его».
Каждый раз, когда React сообщает вам, что что-то Undefined, это, вероятно, означает, что вам нужно сообщить файлу, о чем вы говорите, с помощью импорта.
ERROR: Import in body of module; reorder to top import/first
ПЕРЕВОД: «Напишите операторы импорта в верхней части файла».
TypeError: Cannot read property 'title' of undefined
ПЕРЕВОД: «Какой бы атрибут или элемент вы ни пытались показать, не существует. Скорее всего, потому что реквизит еще не сдан и не «загружен». (Компонент полагается на запрос на выборку?) Добавьте логику, чтобы компонент не сломался во время ожидания реквизита ».
Attempted import error: 'file/name' does not contain a default export
ПЕРЕВОД: «Файл, который вы хотите импортировать, содержит множество функций / компонентов, вам нужно сказать мне, какой из них вы хотите использовать в этом файле, ИЛИ экспортируйте эту функцию по умолчанию».
Вышеупомянутый оператор импорта вызывает ошибку, потому что файл, содержащий функцию, не имеет экспорта по умолчанию.
../helperFunctions.js содержит две функции, поэтому при импорте в компонент Week необходимо явно объявить функцию / компонент, который вы хотите импортировать, заключив его в фигурные скобки.
Боковое примечание: при импорте из внешних библиотек, таких как
react-bootstrap, вы можете написать свой импорт двумя способами. Согласно официальной документации, предпочтение отдается второму способу.
import { Button } from 'react-bootstrap'
import Button from 'react-bootstrap/button' //preferred
Uncaught Error: input is a void element tag and must neither have 'children' nor use 'dangerouslySetInnerHTML'
ПЕРЕВОД: «Проверьте свой JSX, самозакрывающиеся ли теги ввода?»
Напишите свой JSX так: <input/> не так <input> </input>
Вот что нам нравится видеть ...
Мне бы хотелось услышать о типичных проблемах, с которыми вы сталкиваетесь при работе с React или в целом при программировании. Этот список предназначен для того, чтобы помочь вам в работе над React. Я очень хочу дополнить его и включить в него опыт других. Мне особенно хотелось бы услышать, не приведет ли ваша ошибка к моменту «ладони лица», как только вы ее поймете. Мы все там были :)
Помощь друг другу в повышении эффективности только увековечит продуктивность и эффективное развитие для всех нас. Удачного кодирования!
