使用JavaScript时如何在对象数据中使用可选链接？
我从 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;
我该如何解决这个错误？我可以在对象中使用可选链接吗？
我该如何修复我的代码？
回答
不需要可选链接。可选链仅在访问可能为 null 的对象的属性时有用，并且您正在使用该对象作为参数调用函数。
您可能正在考虑nullish 合并运算符，如果被检查的值为空或未定义，它会为您提供不同的值，您可以通过以下方式在此处使用：
const contentOnly = Object.keys(singlePost ?? {});
但是，我想说这是获取空数组的一种相当迂回的方式。我只是使用三元或条件运算符：
const contentOnly = singlePost == null ? [] : Object.keys(singlePost);
这会准确地告诉读者他们将得到什么，特别是如果您singlePost默认设置为 null。