使用 TypeScript 和 Webpack 的可选链接失败的传播

Question

我有一个 TypeScript 与 webpack 捆绑在一起的应用程序。

我正在使用传播运算符：

const payload = {
  ...originalList,
  byKey: {
    [listId]: {
      ...originalList?.byKey[listId],
      members: [
        ...originalList?.byKey[listId]?.members, // <== members may be undefined
        {
          id: data?.attributes?.id,
        },
      ],
    },
  },
};

当members未定义时，我收到一个错误：

TypeError: can't access property Symbol.iterator of undefined

但这仅发生在 Firefox 上； 例如，在 Chrome 上，它通过了。 可能与我的 webpack 构建或 tsconfig 有关吗？

这是 tsconfig：

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/",
    "jsx": "react",
    "allowJs": true,
    "sourceMap": true,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "ES6",
    "lib": ["ES6", "dom", "esnext"],
    "resolveJsonModule": true,
    "esModuleInterop": true,
  },
  "include": ["./src/**/*", "./*"]
}

这是我的 webpack

const webpackClientDevConfig = {
  mode: 'development',
  entry: ['webpack-hot-middleware/client', WEBPACK_SRC_CLIENT],
  output: {
    filename: 'client-[hash:4].js',
    publicPath: WEBPACK_ROOT,
  },
  devtool: '#source-map',
  stats: 'normal',
  module: {
    rules: [
      {
        test: /\.(less|css)$/,
        use: ['style-loader', 'css-loader', 'less-loader'],
        exclude: /node_modules/,
      },
    ],
  },

[…] etc.

我真的很好奇，欢迎任何帮助

Answer 1

未定义是不可传播的。 那么如果？ 触发器然后结果是未定义的，并且您的代码实际上是......未定义的，这显然不起作用。

利用？？ 合并到一个空数组...（东西？。道具？？[]），或者找到另一种处理空/未定义的方法（如 if 检查）