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
    }
  }
}

但是，我通过的联系道具可能为空。当我尝试访问道具属性时，处理空道具的最佳方法是什么？我可以有一个if语句来检查contact是否为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
    }
  }
}

Answer 2

您可以尝试以下方法定义ContactForm组件。

class ContactForm extends React.Component {

    //your default state  
    state = {
        name: '',
        position: '',
        email: '',
        phone_number: ''
    };

    constructor(props) {
        super(props)
        this.state = {...this.state,...props.contact};
    }

    render(){

    }
}

这样，您将拥有默认状态，并且可以直接使用从联系人传递到状态的所有道具。

Answer 3

我相信在这种情况下最好的选择是使用React Component的defaultProps。也许这可以帮助您：

class ContactForm extends React.Component {
 // your component code
}
ContactForm.defaultProps = {
  name: '',
  position: '',
  email: '',
  phone_number: '',
};

我也强烈建议您也使用道具类型，然后可以为希望收到的每个道具定义标准类型

如果您使用了Create React App CLI，只需将其导入：

import PropTypes from 'prop-types';

在您的defaultProps之前，请编写类似以下内容的

：

ContactForm.propTypes = {
  name: PropTypes.string,
  position: PropTypes.string,
  phone_number: PropTypes.number,
  ...
}

您应该使用静态getDerivedStateFromProps（props，state）来根据收到的道具设置新的State。也尝试：

class ContactForm extends React.Component {
 static getDerivedStateFromProps(props, state) {
   // Checking if props.contact exist
   if (props.contact) return {...contact}
 }
}

getDerivedStateFromProps应该返回一个表示组件新状态的对象。

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

3 个答案: