可选的链接运算符在本地主机上工作但不在生产中

Question

我不确定这是我做错了什么，还是我遗漏了什么，但是我在我创建的 React 应用程序的某些部分中添加了可选链接 ?.。即

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

这适用于我的 mac 中 chrome 中的本地主机，也适用于 Safari 中的 Xcode ios 13 iPad 模拟器但是当我使用

部署 firebase 应用程序时

react-scripts build && firebase deploy

应用程序崩溃说 customFieldName 未定义，在某些情况下它会是因为数组 customFields 将是 empty/null，但我会处理回退到 "Custom Field" 设置为默认的字符串。

所以我的问题是为什么可选链接 ?. 代码在本地主机上工作而不在部署中工作？我已经查看该浏览器是否加载了最新版本，确实如此。

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

如有任何帮助，我将不胜感激。

我认为将来可能无法知道代码在 development/localhost 中运行时是否在生产中实际运行。

Answer 1

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

确保数组永远不会为 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";

可选的链接运算符在本地主机上工作但不在生产中

optional chaining operator working on local host but not in production

javascript

reactjs

firebase-hosting

optional-chaining

create-react-app