使用 JavaScript 时如何在对象数据中使用可选链接？答案

【问题标题】：How can I use optional chaining in object data when I use JavaScript?使用 JavaScript 时如何在对象数据中使用可选链接？
【发布时间】：2021-04-25 18:31:00
【问题描述】：

我从 Redux 获取 singlePost 数据，并使用 Object.keys 将其放入数组中。

但是，在渲染过程中，singlePost 接收较晚，所以当我尝试 console.log 时，首先记录的是 null，然后才进入正确的数据。

所以这个错误被打印出来了。

无法将 undefined 或 null 转换为对象

这是我的代码

  const Explain = ({navigation, route}) => {
  const {singlePost} = useSelector((state) => state.post);

  console.log("singlePost:",singlePost);

  // singlePost: null    first recorded

  // singlePost:

  // singlePost = {
  //   User: {
  //     id: 3,
  //     nickname: "bill",
  //   },
  //   content1: "number1",
  //   content2: "number2",         second recorded
  //   content3: "bye",
  //   content4: "empty",
  //   content5: "empty",
  //   content6: "empty",
  //   content7: "empty",
  //   content8: "number3",
  //   content9: "empty",
  //   content10: "empty",
  // };   


  const contentOnly = Object.keys(singlePost)
  
  return (
  
  );
};

export default Explain;

如何解决此错误？我可以在对象中使用可选链吗？

如何修复我的代码？

【问题讨论】：

标签： javascript node.js reactjs react-native

【解决方案1】：

不需要可选链接。 Optional chaining 仅在访问可能为 null 的对象的属性时有用，并且您正在以该对象作为参数调用函数。

您可能会想到the nullish coalescing operator，如果正在检查的为空或未定义，它会为您提供不同的值，您可以通过以下方式在此处使用：

const contentOnly = Object.keys(singlePost ?? {});

但是，我想说这是获取空数组的一种相当迂回的方法。我就用a ternary, or conditional operator:

const contentOnly = singlePost == null ? [] : Object.keys(singlePost);

这会准确地告诉读者他们会得到什么，尤其是如果您将 singlePost 默认设置为 null。

【讨论】：

【解决方案2】：

您可以检查typeof 变量及其是否为空，如下所示：

const contentOnly = (typeof singlePost === 'object' && singlePost !== null) ? Object.keys(singlePost): []

【讨论】：

【解决方案3】：

在您的情况下，您可以检查是否定义了 singlePost：

const contentOnly = Object.keys(singlePost || {})
// or
if(singlePost && typeof singlePost == 'object') {...do something}

如果您需要可选链接（根据问题标题）。你可以这样做

singlePost && singlePost.content1
// or with new syntax
singlePost?.content1

注意 - 并非所有环境都支持新语法

【讨论】：