javascript - 访问 prop 属性时处理 null prop 的最佳实践

Question

我有一个 React 组件，我传递了一个 Prop ，我用它来设置组件的初始状态:

class ContactForm extends React.Component {
  constructor(props) {
    super(props)

    const { contact } = this.props
    const { name, position, email, phone_number } = contact

    this.state = {
      name: name,
      position: position,
      email: email,
      phone_number: phone_number
    }
  }
}

但是，我传递的 contact 属性可能为空。当我尝试访问 prop 属性时，处理 null prop 的最佳方法是什么？我可以有一个 if 语句来检查 contact 是否为 null，并将状态设置为 null，如下所示:

if (contact) {
  const { name, position, email, phone_number } = contact

  this.state = {
    name: name,
    position: position,
    email: email,
    phone_number: phone_number
  }
} else {
  this.state = {
    name: '',
    position: '',
    email: '',
    phone_number: ''
  }
}

但我想知道是否有更好的方法

Answer 1

您可以将 contact 默认为空对象，并将其他值默认为空字符串:

class ContactForm extends React.Component {
  constructor(props) {
    super(props)
    // Only undefined values can be given default values when destructuring,
    // so it needs to be written like this
    const contact = this.props.contact || {}
    const { name = '', position = '', email = '', phone_number = '' } = contact

    this.state = {
      name,
      position,
      email,
      phone_number
    }
  }
}