空值检查对象失效求助：已知值为空但循环未终止

我一眼就揪出问题所在啦！你用for...in遍历this.detail的时候，循环变量value其实是对象的属性名（比如"name"、"phone"这类字符串），而不是属性对应的实际值。你想想，字符串怎么可能等于null呢？这就是为什么你的if条件永远触发不了，控制台也看不到null found的原因！

先看你原来的代码问题：你console.log(value)输出的应该是name、phone、email这些属性名称，对吧？这就是关键——你需要通过属性名去获取对应的值，再做null判断。

修正后的代码示例 #

handleSubmit(){
  const {DetailStore} = this.props;
  for (let key in this.detail) {
    // 先通过属性名拿到对应的值
    const value = this.detail[key];
    console.log(`属性名：${key}，属性值：${value}`);
    if (value === null) {
      console.log('null found'); // 现在这条日志就能正常输出啦
      this.setState({ warningMsg: `请填写${key}字段` });
      // 如果需要找到第一个null就终止循环，加上break
      break;
    }
  }
}

额外优化：更现代的遍历方式 #

如果你想避开for...in的原型链遍历问题，还可以用ES6+的Object.entries或Object.values：

方式1：用Object.entries同时获取键和值

handleSubmit(){
  const {DetailStore} = this.props;
  for (const [key, value] of Object.entries(this.detail)) {
    console.log(`属性名：${key}，属性值：${value}`);
    if (value === null) {
      console.log('null found');
      this.setState({ warningMsg: `请填写${key}字段` });
      break;
    }
  }
}

方式2：用Object.values快速检测是否存在null

如果只需要判断是否有null值，不需要具体是哪个字段，可以用some方法：

handleSubmit(){
  const {DetailStore} = this.props;
  const hasNullValue = Object.values(this.detail).some(value => value === null);
  if (hasNullValue) {
    console.log('null found');
    this.setState({ warningMsg: '存在未填写的必填字段' });
  }
}

小提醒 #

如果坚持用for...in，最好加上hasOwnProperty判断，避免遍历到对象原型链上的额外属性：

for (let key in this.detail) {
  if (this.detail.hasOwnProperty(key)) {
    const value = this.detail[key];
    // 后续判断逻辑
  }
}

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