Не знаю, случалось ли с вами, что, как и в повседневной жизни, React иногда проявляет необъяснимое поведение в определенные моменты времени, поэтому мы быстро обратились к нашему другу Google. Однако решение не всегда дается сразу либо из-за того, как мы формулируем вопрос, либо потому, что результат, по-видимому, настолько очевиден, что никто не вникал в предмет. Мы получаем отсылки в виде подсказок, которые, следуя им, наконец освещают путь к разгадке. Это часть обучения, когда мы принимаем вызовы, которые заставляют нас расширять наше видение и знания. Но давайте по делу, ниже я буду ссылаться на некоторые кейсы и приемы, извлеченные из странного мира React-JavaScript.

Ошибка типа: variable.map не является функцией. Это сложная ошибка, которая может исходить из нескольких источников, но наиболее распространенная из них возникает, когда мы применяем карту к массиву, значение которого получено из выборки и в сначала отобразите, что значение (значение обещания) недоступно, или при просмотре содержимого объекта, когда нет известной гарантии относительно того, какие свойства требуются. Существует несколько подходов к решению, первый — инициализировать состояние или переменную с помощью [ ].

Второй, если требуется, дополняет первый и состоит из проверки того, что длина массива не равна 0. Вместе с этой информацией мы можем обновить состояние, которое во время выборки указывает, загружается он или нет, и которое служит в качестве семафора для отображения результатов.

И если проблема не устранена, у нас все еще есть необязательная цепочка (?.). Этот оператор позволяет нам считывать значение свойства, расположенного глубоко в цепочке связанных объектов, без необходимости проверять правильность каждой ссылки в цепочке. В отличие от простого оператора цепочки (.), он не вызывает ошибки, если ссылка имеет значение null или не определено, что позволяет замкнуть выражение с неопределенным возвращаемым значением. При использовании в вызовах функций он также возвращает неопределенное значение, если рассматриваемая функция не существует.

Оператор сравнения не того же типа (!==), что иногда не работает в .filter():Многие из вас не согласятся с этим утверждением, но найдутся и те, кто только что понял причину некоторых противоречивых результатов. Правда в том, что я должен был пережить этот опыт, и было бесполезно получать информацию об этом. В конце концов, решение было простым и послужило подтверждением того, что это не так, потому что я сравнил два элемента разных типов с одним и тем же значением. Просто запретите сравнение того же типа, например: items.filter(item =› item.id !== other.id) измените выражение на: items.filter(item =› !(item.id === other.id)), и он начал вести себя так, как ожидалось.

React setState/useState не обновляется немедленно: Это утверждение известно всем, потому что это просто очереди. React this.setState и useState не вносят изменения непосредственно в объект состояния, они создают очереди для ядра React для обновления объекта состояния компонента React. Однако, в зависимости от случая, есть несколько способов обойти эту ситуацию. Обычный случай, когда он является производным от события, где функция обратного вызова, которая обрабатывает событие, обычно выполняет обновление состояния в качестве первого шага, используя значение элемента event.target или производные. Мы просто должны использовать это значение напрямую, а не извлекать его из состояния внутри обработчика, например, направляя запрос на получение. Точно так же, когда мы делаем выборку, в рамках ее обработки мы в основном обновляем состояние, и, как мы уже говорили в начале блога, нам обещают, что данные из состояния будут доступны. Вот почему я предлагаю использовать это значение для выполнения зависящих от него кодов, разумеется, в рамках обработки выборки.

Я надеюсь, что содержащиеся здесь элементы информации были приятными и полезными. В качестве краткого обновления набора целей я должен сказать вам, что я уже начинаю 18-ю неделю из 32 курса веб-разработки и разработки программного обеспечения в школе Flatiron, чувствуя себя более преданным, мотивированным и получающим максимальное удовольствие от этого путешествия. каждый день.