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

Question

我正在从 Redux 获取 singlePost 数据，并使用 Object.keys 将其制成一个数组。

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

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

Cannot convert undefined or null to object

这是我的代码

  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;

    

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

如何修复我的代码？

Answer 1

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

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

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

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

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

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