1

我不确定这是我做错了什么，还是我错过了一些东西，但我已经在?.我的 create react 应用程序的某些部分添加了可选链接。IE

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

这适用于我的 Mac 上的 chrome 本地主机，也适用于 Safari 中的 Xcode ios 13 iPad 模拟器，但是当我使用部署 firebase 应用程序时

react-scripts build && firebase deploy

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

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

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

我将不胜感激任何帮助。

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

4

1 回答 1

2

看来您的预期是实际数组的值实际上是 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";
于 2020-01-02T16:03:56.503 回答