необязательный оператор цепочки, работающий на локальном хосте, но не в производстве

Я не уверен, что я что-то делаю неправильно или что-то упустил, но я добавил необязательную цепочку ?. в некоторые части моего приложения для создания реакции. то есть

  const customFieldName = customFields[0]?.customFieldName || "Custom Field";

Это работает на локальном хосте в chrome на моем Mac, а также на симуляторе iPad Xcode ios 13 в Safari, но когда я развертываю приложение firebase с помощью

react-scripts build && firebase deploy

Приложение вылетает, говоря, что customFieldName не определено, что в некоторых случаях будет так, поскольку массив customFields будет пустым/нулевым, но я позабочусь о том, чтобы мой возврат к строке «Пользовательское поле» был установлен по умолчанию.

Итак, мой вопрос: почему необязательный код цепочки ?. работает на локальном хосте, а не в развертывании? Я проверил, чтобы увидеть, что браузер загружает последнюю версию, которая есть.

Я также знаю, что необязательная цепочка ?. — это новая функция, поэтому она может работать не во всех браузерах, особенно в более старых версиях.

Буду признателен за любую помощь.

Я думаю, что в будущем будет невозможно узнать, действительно ли код работает в производстве, когда он работает в разработке/локальном хосте.


reactjs create-react-app javascript firebase-hosting optional-chaining
person Andrew Irwin    schedule 02.01.2020    source источник
comment
может ли быть, что фактический массив customFields не определен? Если да, попробуйте customFields?[0]?.customFieldName || "Custom Field"   -  person shamsup    schedule 02.01.2020
comment
Поддержка необязательных цепочек есть только в chrome @ 79, если вы поддерживаете только в chrome, все будет хорошо, иначе вам нужно подождать, даже если я пробовал это в своем локальном компьютере, у меня получалась ошибка Chrome @ 79.0.3945.88. И это ваша структура данных не customFields = [{customFields: 'john' }]   -  person Learner    schedule 02.01.2020
comment
Является ли customFieldName is undefined фактическим текстом ошибки? Если нет, не могли бы вы предоставить нам всю ошибку? Я вижу, что у вас есть как свойство с именем customFieldName, так и переменная с таким именем, поэтому по какой-то причине ошибка может относиться к этой переменной. Кроме того, вы установили, что ошибка возникает в этой строке? Если нет, подтвердите это.   -  person JLRishe    schedule 02.01.2020
comment
Вы компилируете/транспилируете свой код? Какие версии инструмента вы используете?   -  person Bergi    schedule 02.01.2020
comment
@shamsup Спасибо за ваш комментарий, который решил проблему для меня, теперь он работает на локальном хосте и в производстве. Я добавил customFields?.[0]?.customFieldName || "Custom Field", теперь он работает в хроме (79) на Mac и в сафари на симуляторе ipad ios13. исходный код, который у меня был, отсутствовал ?. перед customFields, чтобы проверить, был ли он нулевым или нет. Я все еще в замешательстве, хотя, почему мой исходный код не разбился на локальном хосте, а работал?   -  person Andrew Irwin    schedule 02.01.2020
comment
@JLRishe backend.js:6 TypeError: Cannot read property '0' of null - это фактическая ошибка, которую он выдает (я почти уверен, что это ссылка на нулевой массив). Я думал, что это другая ошибка, но вернулся и изменил код, чтобы воссоздать сбой. ошибка была в строке кода, которую я упомянул в своем вопросе.   -  person Andrew Irwin    schedule 02.01.2020
comment
@Bergi Я просто использую стандартную/ванильную версию приложения create-react-app с javascript, поэтому я думаю, что он использует Babel за кулисами для переноса моего кода. "react": "^16.12.0", "react-scripts": "3.3.0", Можете ли вы сказать мне, почему мой исходный код работал на локальном хосте, но не работал в рабочей среде?   -  person Andrew Irwin    schedule 02.01.2020
comment
Был бы я прав, если бы какое-то время воздерживался от необязательных цепочек ?., пока они не будут более поддержаны?   -  person Andrew Irwin    schedule 02.01.2020
comment
@AndrewIrwin Вполне вероятно, что в вашей локальной среде были данные, заставляющие присутствовать массив, но в реальных производственных данных этот массив отсутствовал.   -  person shamsup    schedule 02.01.2020
comment
что касается использования необязательной цепочки, то Babel поддерживает ее, и она поддерживается в приложении create-react-app, начиная с версии 3.3.0, поэтому у вас не должно возникнуть проблем с включением ее в вашу кодовую базу, если вы используете CRA›=3.3.0 или иметь правильную конфигурацию Babel.   -  person shamsup    schedule 02.01.2020
comment
Хорошо, большое спасибо, да, я использую CRA v.3.3.0   -  person Andrew Irwin    schedule 02.01.2020

Ответы (1)


arrow_upward
2
arrow_downward

Похоже, что ваше значение, которое, как ожидается, будет фактическим массивом, на самом деле равно нулю или не определено. Чтобы предотвратить ошибку, вы можете предпринять два действия:

  1. убедитесь, что массив никогда не бывает нулевым или неопределенным (через аргументы по умолчанию или другими способами)
  2. используйте необязательный синтаксис цепочки для самого массива:
const customFieldName = customFields?.[0]?.customFieldName || "Custom Field";
//                                  ^ optional chaining added here

Что касается поддержки браузера, если вы используете правильную конфигурацию babel для этой функции или, в вашем случае, create-react-app >=3.3.0, у вас не должно возникнуть проблем с поддержкой браузера. Babel просто преобразует новый синтаксис в корректный кроссбраузерный код, например:

var _customFields, _customFields$;

var customFieldName = ((_customFields = customFields) === null || _customFields === void 0 ? void 0 : (_customFields$ = _customFields[0]) === null || _customFields$ === void 0 ? void 0 : _customFields$.customFieldName) || "Custom Field";
person shamsup    schedule 02.01.2020
comment
Спасибо за ваш ответ. Мне просто любопытно, какой курс возьмет в этом случае. похоже, что профилактика лучше, чем лечение сценария - person Andrew Irwin; 02.01.2020
comment
Я бы пошел на превентивный сценарий. Это постоянная битва в javascript в целом, поэтому я бы гарантировал, что значение существует в каждом сценарии. Предотвращение ошибок типа, подобных этой, является основной причиной существования статической типизации (например, машинописного текста). При этом вполне допустимо и рекомендуется писать код, который правильно обрабатывает неожиданные значения, особенно при работе с динамическими данными, такими как данные из API или пользовательский ввод. - person shamsup; 02.01.2020