React中仅当card存在时解构props的实现方法

我编写了如下React组件代码：

const Sample = ({card}) => {
 const {createdAt, title} = card;

 const dateFormat = isThisYear(createdAt) ? 'MMM d' : 'MMM d, yyyy';

 return(
   <Child title={title} />
 )
}

运行时出现错误：TypeError: Cannot destructure property 'createdAt' of 'card' as it is undefined.

我希望仅当父组件传入了card（即card存在）时，才解构获取card中的createdAt和title。目前我通过可选链操作符?.避免了错误，代码如下：

const Sample = ({card}) => {
 
  const dateFormat = isThisYear(card?.createdAt) ? 'MMM d' : 'MMM d, yyyy';
 
  return(
    <Child title={card?.title} />
  )
 }

但我想知道是否有方法可以直接解构props，仅在card存在时获取createdAt和title？

几种可行的解构方案 #

1. 给card设置默认空对象

直接在props解构层为card设置默认值{}，这样即使card是undefined，嵌套解构也不会抛出错误，只会拿到undefined属性：

const Sample = ({card = {}}) => {
  const { createdAt, title } = card;

  // 根据createdAt是否存在处理日期格式逻辑
  const dateFormat = createdAt ? (isThisYear(createdAt) ? 'MMM d' : 'MMM d, yyyy') : '';

  return(
    <Child title={title} />
  )
}

2. 结合空值合并运算符的解构

用card ?? {}判断，若card为null或undefined则替换为空对象，再进行解构：

const Sample = ({card}) => {
  const { createdAt, title } = card ?? {};

  const dateFormat = createdAt ? (isThisYear(createdAt) ? 'MMM d' : 'MMM d, yyyy') : '';

  return(
    <Child title={title} />
  )
}

3. 条件判断后解构

先判断card是否存在，再执行解构操作：

const Sample = ({card}) => {
  let createdAt, title;
  if (card) {
    // 注意这里要加括号，属于块级作用域内的解构赋值
    ({ createdAt, title } = card);
  }

  const dateFormat = createdAt ? (isThisYear(createdAt) ? 'MMM d' : 'MMM d, yyyy') : '';

  return(
    <Child title={title} />
  )
}

4. 嵌套解构+默认值（参数层直接处理）

直接在函数参数中完成嵌套解构，同时给嵌套的card设置默认空对象：

const Sample = ({card: { createdAt, title } = {}}) => {
  const dateFormat = createdAt ? (isThisYear(createdAt) ? 'MMM d' : 'MMM d, yyyy') : '';

  return(
    <Child title={title} />
  )
}

注意：如果card可能为null，这种写法会报错，建议搭配??运算符使用。

内容的提问来源于stack exchange，提问作者Happy1234