可选的链接操作员在本地主机上工作,但不在生产环境中

时间:2020-01-02 14:50:41

标签: javascript reactjs create-react-app firebase-hosting optional-chaining

我不确定这是我做错了还是错过了某件事, 但是我在我的create react应用程序的某些部分中添加了可选链?.。 即

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

这可以在我的Mac上的Chrome中的localhost上运行,也可以在Safari中的Xcode ios 13 iPad模拟器上运行 但是当我使用

部署firebase应用时
react-scripts build && firebase deploy

应用程序崩溃,提示customFieldName是未定义的,在某些情况下,它将是由于数组customFields将为空/空,但是我要确保我回到“ Custom Field”字符串设置为默认值。

所以我的问题是,为什么可选的链接?.代码在本地主机中而不在部署中起作用? 我检查过该浏览器是否正在加载最新版本。

我也知道可选链接?.是一项新功能,因此可能不适用于所有浏览器,尤其是旧版本。

我将不胜感激。

我认为将来在开发/本地主机上工作时,可能无法知道代码是否真正在生产中工作。

1 个答案:

答案 0 :(得分:2)

看来,您期望为实际数组的值实际上为null或未定义。为防止错误,您可以采取两种措施:

  1. 确保数组永远不会为null或未定义(通过默认参数或其他方式)
  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";