React表单state数组长度为0但可访问元素问题咨询

问题核心原因 #

1. 你错误地使用数组存储键值对结构的表单数据：数组的length属性仅会统计下标为非负整数的元素，你给数组挂载自定义字符串属性（比如ort）属于给数组对象添加自定义属性，不会触发length更新，也不能被forEach等数组遍历方法识别。控制台输出的ort属于数组对象的非标准元素属性，所以不会被计入长度统计。
2. 你直接修改了原state的值：this.state.saveFormData[name] = value属于直接篡改state，违反React state的不可变更新原则，可能导致视图更新异常。

修复方案 #

1. 调整state初始类型

把saveFormData的初始值从空数组[]改为空对象{}，适配键值对的存储需求：

this.state = {
  // 其余原有属性保留
  saveFormData: {} // 从[]改为{}
}

2. 修正输入处理的state更新逻辑

遵循不可变原则，生成新对象再更新state，不要直接修改原state：

handleFormInput(event){
  const target = event.target;
  const value = target.type === 'checkbox' ? target.checked : target.value;
  const name = target.name;

  this.setState({
    // 展开原有属性，合并新输入值，生成新对象
    saveFormData : {
      ...this.state.saveFormData,
      [name]: value
    }
  }, () => {console.log(this.state.saveFormData)});
}

3. 修正提交逻辑的属性统计方式

对象的属性数量需要通过Object.keys获取：

handleForm(){
  // 统计表单已填属性数量
  const formDataLength = Object.keys(this.state.saveFormData).length;
  console.log(formDataLength); // 此时会输出正确的数值

  if(formDataLength == 0){
    this.setState({ openNew: false })
    console.log(this.state.saveFormData);
  }else{
    console.log(this.state.saveFormData);
    alert('we found Data' + JSON.stringify(this.state.saveFormData));
  }
}

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