Чего нельзя делать и как их исправить, если вы это сделаете
Эта статья предназначена для разработчиков, которые совершенно не знакомы с React, и для начинающих разработчиков React. Давай начнем!
1. Забыть капитализировать компоненты React
Рассмотрим этот фрагмент кода. Он создает простой div
с заголовком для родительского компонента. Внутри есть дочерний компонент, состоящий из div
с некоторым текстом. Как вы думаете, что появится при запуске кода?
childComponent
не был обработан. Куда это делось? Код успешно скомпилирован. В терминале тоже не было ошибки.
Еще раз взгляните на код дочернего компонента. Обратите внимание на название компонента. Вы замечаете что-то другое?
Откройте консоль в браузере. (CTRL + SHIFT + C
в Windows | Command + Option + C
в Mac | Щелкните правой кнопкой мыши - ›« Проверить ».)
Оказывается, React вместо этого рассматривает компоненты в нижнем регистре как теги DOM. Если вы новичок в React, возможно, вы пропустили эту крошечную деталь в документации React.
Не зная этого, новички нередко застревают здесь, гадая, что пошло не так, даже если их код скомпилирован без ошибок.
Исправить это просто. Используйте свои компоненты с большой буквы.
2. Неправильный вызов полученного реквизита
Чтобы получить доступ к реквизитам, которые были переданы родительским компонентом, дочерний компонент должен гарантировать, что они вызывают правильные имена свойств.
Свойства могут быть переданы в дочерние компоненты, используя другое имя переменной. Рассмотрим этот фрагмент кода:
Хотя этот код будет компилироваться и запускаться без ошибок, текст внутри ChildComponent
отображаться не будет.
<ChildComponent mainText={randomString} />
Взгляните на эту строчку кода внимательнее. Переменная randomString
, объявленная внутри ParentComponent
, была передана в ChildComponent
как свойство с именем mainText
.
Однако ChildComponent
пытается получить доступ к randomString
из полученных реквизитов. Поскольку он получил только mainText
как опору, это приведет к тому, что undefined
будет назначен randomString
, который был объявлен в ChildComponent
. В результате внутри его тегов <p>
ничего не отображается.
Обратите внимание на то, какие свойства были переданы вашим компонентам, и получите к ним доступ соответственно. Это избавит вас от лишней головной боли при отладке.
3. Передача неправильных типов реквизита.
Компонент, который зависит от этих полученных реквизитов, может вести себя по-другому, если полученные реквизиты не относятся к ожидаемому типу.
Рассмотрим этот ChildComponent
, который получает два реквизита: showIntro
и showBody
. Отображается "Привет!" и «Найдите ошибку!» , только если для showIntro
и showBody
установлено значение true соответственно.
ChildComponent
ожидает, что в качестве свойств будут переданы два логических значения. Что произойдет, если вы сделаете что-то подобное в родительском компоненте?
<ChildComponent showIntro='false' showBody='false' /> <ChildComponent showIntro={'false'} showBody={'false'} /> <ChildComponent showIntro={false} showBody={false} />
Для передачи реквизита использовались разные кавычки и фигурные скобки. Однако их поведение не будет прежним. Проверить это:
Оба <p>
тега отображаются для первых двух ChildComponent
, но не для последнего ChildComponent
.
Передача 'false'
и {'false'}
в качестве свойств приведет к тому, что showIntro
и showBody
будут непреднамеренно присвоены строке со значением false
вместо логического false
.
showIntro
и showBody
получили true
за первые два ChildComponent
.
Это происходит из-за неявного приведения типа оператором &&
. Когда оператор &&
проверяет showIntro
или showBody
(обе строки), обе строки будут переведены в true
.
Последний ChildComponent
получил логическое false
, поэтому ничего не отображал правильно.
console.log(`showIntro type: ${typeof showIntro}`); console.log(`showIntro evaluated to: ${showIntro && true}`); console.log(`showBody type: ${typeof showBody}`); console.log(`showBody evaluated to: ${showBody && true}`);
Чтобы убедиться в этом, запустим console.log()
, чтобы проверить, как оцениваются наши реквизиты в каждом ChildComponent
.
Как показано здесь, очень важно, чтобы новички могли различать различия между использованием кавычек и фигурных скобок при передаче свойств другим компонентам.
Вы можете использовать кавычки для передачи строковых литералов.
<MyComponent data='Hello World!'/> // passing in a String
Фигурные скобки используются для передачи выражений JavaScript.
<MyComponent data={2468} /> // passing in a Number
<MyComponent data={true} /> // passing in a Boolean
Вот кое-что из React Docs, на что вы также должны обратить внимание:
«Не заключайте в кавычки фигурные скобки при встраивании выражения JavaScript в атрибут. Вы должны использовать кавычки (для строковых значений) или фигурные скобки (для выражений), но не оба сразу в одном атрибуте ».
4. Вызов setState () внутри render ()
Вы могли столкнуться с этой ошибкой, несмотря на то, что внутри вашего компонента не было componentWillUpdate()
или componentWillUpdate()
. Не волнуйтесь, эта ошибка возникает, когда вы вызываете setState()
и внутри своей render()
функции.
Почему это происходит? Каждый раз, когда вы вызываете setState()
, React будет повторно выполнять рендеринг, вызывая render()
. Что внутри вашей render()
функции? setState()
.
Вы видите, к чему все идет? Бесконечный цикл.
Просто переместите вызов setState()
за пределы функции render()
.
Если вам нужно инициализировать свое состояние (возможно, вы получаете данные из конечной точки API) после монтирования компонента, сделайте это внутри componentDidMount()
.
Если есть возможность инициализировать ваше состояние до монтирования компонента, вы также можете сделать это с помощью конструктора.
5. Асинхронный характер setState ()
Использование console.log()
для распечатки значений - обычное дело при отладке. Однако это не очень хорошо работает, когда код выполняется асинхронно.
Вы пробовали делать что-то подобное раньше? Плохие новости - setState()
вызовы асинхронны. Нет никакой гарантии, что данный код будет выполняться по порядку. Это может привести к таким результатам:
Два console.log()
вызова, выполненные до выполнения setState()
. Таким образом, он дважды печатает значение предыдущего состояния.
Если вы хотите проверить значение своего состояния до и после вызова setState()
, передайте обратный вызов в качестве второго параметра внутри setState()
.
Обратный вызов будет выполнен после завершения setState()
, что даст вам синхронное поведение для вашего console.log()
.
Заключение
Надеюсь, сегодня вы смогли узнать что-то новое. Кроме того, приветствуются все конструктивные отзывы о том, как я могу лучше проиллюстрировать / объяснить определенный момент!
Спасибо за прочтение!
P.s. это моя первая попытка написать техническую статью, дайте мне знать, если вы заметите какие-либо ошибки, которые я мог допустить!