Null 保护 map 内部的结构

Question

你知道有没有办法让 null 保护发生在 map 内部的破坏？

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

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

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

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

是否可以在 map 内部做类似的事情？

Answer 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

您当然可以-无论如何-使用destructuring ，但您必须确保该item是null的可能性。

{array.map((item) => {
  const { name, age } = item || {};

  return (
    <>
      <div>{name}</div>
      <div>{age}</div>
    </>
  )}
)}