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

【问题标题】：optional chaining operator working on local host but not in production在本地主机上工作但不在生产环境中的可选链接运算符
【发布时间】：2020-04-21 05:39:10
【问题描述】：

我不确定这是我做错了什么，还是我错过了什么，但是我在我的 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 为空/空，但我会注意我回退到要设置的“自定义字段”字符串默认。

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

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

我将不胜感激。

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

【问题讨论】：

会不会是实际的customFields 数组未定义？如果是这样，请尝试customFields?[0]?.customFieldName || "Custom Field"
只有 chrome@79 支持可选链，如果你只支持 chrome 就可以了对我来说 Chrome@79.0.3945.88。这是你的数据结构不是 customFields = [{customFields: 'john' }]
customFieldName is undefined 是实际的错误文本吗？如果没有，您能否向我们提供整个错误？我看到您有一个名为 customFieldName 的属性和一个具有该名称的变量，因此错误可能出于某种原因引用了该变量。另外，您是否确定该行发生了错误？如果不是，请验证。
你在编译/转译你的代码吗？您使用什么版本的工具？
关于使用可选链，babel 支持它，并且它从 v3.3.0 开始在 create-react-app 中得到支持，所以只要你在你的代码库中包含它应该没有问题使用 CRA>=3.3.0 或具有适当的 babel 配置。

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

【解决方案1】：

看来您的预期值是实际数组实际上是 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";

【讨论】：

感谢您的回答。我只是好奇在这种情况下会采取哪种方式。这看起来像是“预防胜于治疗”的情景
我会选择预防方案。一般来说，这在 javascript 中是一场持续的战斗，所以我会去保证在每个场景中都存在价值。防止这样的类型错误是存在静态类型（例如打字稿）的主要原因。话虽如此，编写正确处理意外值的代码是完全有效和鼓励的，尤其是在处理来自 API 或用户输入的数据等动态数据时。