如何在React的构造函数中处理Null Props

Question

我有一个表单，所以一个典型的表单将有编辑和创建，我没有创建的问题，现有数据从主容器传递，每个组件通过道具并分配给他们自己的状态，如此

export default class Name extends Component {

  constructor(props){
    super(props)
    const { data } = props

    this.state = {
      name: data.name
    }
  }

  ...
  ...
}

如果我遇到创建问题，如果<Name />呈现没有数据道具，则上面的代码会出错。如何解决这个问题？我能做到

this.state = {
    name: data && data.name
}

但想象一下，我有其他领域，这不是一个优雅的解决方案。

Answer 1

您可以使用defaultProps 将 道具值设置为默认值： -

    export default class Name extends Component {
      static defaultProps = {
            name: "name default value",
            email: "email default value"  
          };

          constructor(props) {
            super(props);
            this.state = {
             name: this.props.name,
             email: this.props.email,
             // some other variables

            };
          }
...... ..........
...... ..........
}

或

您可以在 componentWillReceiveProps（）方法中更新道具值，此方法将在每次来自服务器或其他内容的道具值更改时执行。如下： -

componentWillReceiveProps(nextProps) {
    if (!this.props.name && nextProps.name) {
     // here you can do according to your need
     // you can update the values of variables in state here 

    this.setState({ name: nextProps.name });

    }
  }