Null 守卫地图内的解构答案

【问题标题】：Null guarding a destructure inside a mapNull 守卫地图内的解构
【发布时间】：2022-09-27 19:52:26
【问题描述】：

你知道有没有一种方法可以保护地图内部发生的解构？

例如，如果我的数组的第一个元素的年龄为空，那么有没有办法编写它以便在迭代解构值时不会崩溃？

export function Component(array) {
  return (
    <>
      {array.map(({ name, age }) => (
        <>
          <div>{name}</div>
          <div>{age}</div>
        </>
      ))}
    </>
  )
}

我知道通过解构，您可以使用这种模式来允许分配空值而不是崩溃

const {name, age} = {...array}

是否可以在地图内做类似的事情？

你认为const {name, age} = {...array} 做了什么？为什么不直接设置默认值？ ({ name = \'\', age = 0 } = {})?
如果array 中的元素可能是null（或undefined），请不要在map 函数参数中使用解构，只需使用元素，检查“真实性”，然后使用@987654328 @ 和 element.age 在您的渲染中。

标签： javascript reactjs error-handling destructuring object-destructuring

【解决方案1】：

你可以试试optional chaining。即使item 是null，它也不会崩溃。

{array.map((item) => (
    <>
      <div>{item?.name}</div>
      <div>{item?.age}</div>
    </>
  ))}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

【讨论】：