我不确定这是我做错了还是错过了某件事,
但是我在我的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”字符串设置为默认值。
所以我的问题是,为什么可选的链接?.
代码在本地主机中而不在部署中起作用?
我检查过该浏览器是否正在加载最新版本。
我也知道可选链接?.
是一项新功能,因此可能不适用于所有浏览器,尤其是旧版本。
我将不胜感激。
我认为将来在开发/本地主机上工作时,可能无法知道代码是否真正在生产中工作。
答案 0 :(得分:2)
看来,您期望为实际数组的值实际上为null或未定义。为防止错误,您可以采取两种措施:
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";