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

Question

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

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

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

部署 firebase 应用程序时

react-scripts build && firebase deploy

应用程序崩溃说 customFieldName 是未定义的，在某些情况下它会是因为数组 customFields 将为空/null，但我会注意我回退到“自定义字段” "设置为默认的字符串。

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

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

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

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

Answer 1

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

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";