React JS中判断state对象为空时执行代码的逻辑问题排查

你的判断逻辑确实存在大概率的问题，这也是React开发中很常见的小坑~

通常来说，我们在初始化表单相关的errors状态时，会把它设为空对象{}而不是null。比如你的state初始化可能是这样的：

this.state = {
  errors: {}
};

这种情况下，哪怕errors里没有任何错误信息，它的值也是空对象，而不是null。你原来的判断条件this.state.errors == null只会在errors是null或者undefined的时候才成立，所以代码块里的逻辑永远不会执行。

这里给你几个可行的修正方案：

• 判断空对象最直接的方式：利用Object.keys()获取对象的所有键名，再判断数组长度是否为0

  if (Object.keys(this.state.errors).length === 0) {
    this.props.updateUser(user);
    this.props.navigation.goBack();
  }
  

• ES6+的另一种写法：用Object.entries()同样可以判断

  if (Object.entries(this.state.errors).length === 0) {
    this.props.updateUser(user);
    this.props.navigation.goBack();
  }
  

• 宽松判断（慎用）：如果你不确定errors可能是null/undefined还是空对象，可以用!this.state.errors，但要注意如果errors是其他 falsy 值（比如0、''）也会触发这个条件，所以只适合你能确定errors只会是对象/null/undefined的场景：

  if (!this.state.errors) {
    this.props.updateUser(user);
    this.props.navigation.goBack();
  }
  

最后建议你先检查一下errors状态的初始值，确认它到底是null还是空对象，这样就能精准匹配判断条件啦~

内容的提问来源于stack exchange，提问作者Nithin Srinivasan