React构造函数中空Props的处理方案？表单场景问题咨询

我平时处理这种多字段表单的场景，有几个很实用的方案，能避免一个个写&&的繁琐，还能让代码更整洁：

方案1：给props.data设置默认空对象 #

不管是通过类的默认属性还是解构时的默认值，让data永远是一个对象，这样直接取data.xxx就不会报错了：

方式A：使用类的defaultProps #

export default class Name extends Component {
  // 给data设置默认空对象
  static defaultProps = {
    data: {}
  }

  constructor(props){
    super(props)
    const { data } = props
    this.state = {
      name: data.name,
      age: data.age,
      email: data.email,
      // 其他字段直接取就行，不会因为data不存在报错
      address: data.address
    }
  }
  // ...
}

方式B：解构props时设置默认值 #

不想写static defaultProps的话，直接在解构的时候给data赋值空对象也一样：

constructor(props){
  super(props)
  // 如果props.data不存在，就用空对象代替
  const { data = {} } = props
  this.state = {
    name: data.name,
    age: data.age,
    // ...其他字段
  }
}

方案2：合并默认状态与传入数据 #

如果编辑模式下你的表单字段有明确的默认值（比如空字符串、0这类），可以先定义一个默认状态对象，再用传入的data去覆盖它，一行代码就能搞定所有字段：

constructor(props){
  super(props)
  // 定义编辑模式下的默认字段值
  const defaultFormState = {
    name: '',
    age: '',
    email: '',
    address: '',
    gender: 'male'
  }
  // 有data就用data的值，没有就用默认值
  this.state = { ...defaultFormState, ...props.data }
}

这个方案最适合字段多的场景，既避免了报错，又统一管理了默认值，后期维护也方便。

方案3：使用可选链+空值合并操作符 #

如果你的项目已经支持ES2020及以上语法，可选链?.可以让你简洁地处理嵌套属性，再配合空值合并??还能给单独字段设置默认值：

constructor(props){
  super(props)
  this.state = {
    name: props.data?.name ?? '',
    age: props.data?.age ?? 0,
    email: props.data?.email ?? '',
    // 不需要默认值的话直接写props.data?.xxx就行
    address: props.data?.address
  }
}

这个写法比data && data.name更直观，字段少的时候用很方便，字段多的话也比一个个写&&优雅很多。

总结一下 #

• 如果只是想避免报错，不需要默认值：方案1的两种方式都很适合；
• 如果有统一的表单默认值：方案2是最省心的，代码量最少；
• 如果需要给不同字段单独设置默认值，且项目支持新语法：方案3更灵活。

内容的提问来源于stack exchange，提问作者Xie Xie Fang