Javascript (React + Flow) - 使用可为空的嵌套对象进行解构

Question

我正在尝试破坏一个暂时可以为 null 的对象。例如：

const { dolphin } = this.props.route.params;

我想要 dolphin 到 return null if route or params 是 null.

但无论我尝试什么，我总是遇到异常“无法读取未定义的属性 'dolphin'。

任何人都可以作为提示吗？谢谢

Answer 1

最接近单行解构赋值的是：

const { dolphin } = this.props.route?.params || { dolphin: null };

但它不会 return null 仅当 .route 或 .params 是 null 时；如果它们是任何虚假值，它就会这样做。

Answer 2

使用nullish coalesce, optional chaining, and default value:

function test(x) {
  this.props = x;
  const { dolphin = null, whale = null } = this.props.route?.params ?? {};
  return { dolphin, whale };
}

console.log(test({
  route: {
    params: null
  }
}))

console.log(test({
  route: null
}))


console.log(test({
  route: { params: { dolphin: 1, whale: 2 } }
}))

请务必在底部注明浏览器的兼容性 table。如果你使用的是 babel，你应该没问题。由于您正在使用 React 和 Flow，您可能已经在使用 Babel 的浏览器目标转译，所以这应该不是问题。

Javascript (React + Flow) - 使用可为空的嵌套对象进行解构

Javascript (React + Flow) - Destructuring with nullable nested objects

javascript

reactjs

flowtype

destructuring