React对象结构状态下，如何用ES6 every校验必填表单字段

云原生阿岚

2026-5-15

解决React表单必填字段校验问题（无需修改现有状态）

我懂你的困扰啦——你之前的代码出错，核心原因是Object.keys(this.state.form)返回的只是表单字段的键名字符串（比如name、age），而不是对应的状态对象，所以你试图访问o.required、o.filled的时候，其实是在访问字符串的属性，结果肯定不对！

不用修改现有状态结构，只需要调整遍历方式就能搞定，给你两种可行的写法：

方法一：用`Object.values()`直接获取字段对象（最简洁）

const formValid = Object.values(this.state.form)
  .filter(field => field.required) // 筛选出所有必填字段
  .every(field => field.filled); // 检查所有必填字段是否已填写

解释：

Object.values(this.state.form)会直接提取form对象里的所有字段对象（比如{required: true, filled: false, value: ''}），这样就能直接访问每个字段的required和filled属性了。
你的filled是布尔类型，所以直接判断field.filled就足够，不用额外和null、''比较（如果后续filled的取值逻辑有变化，再调整判断条件即可）。

方法二：保留`Object.keys()`，转换键名为字段对象

如果你更习惯用Object.keys()，可以通过键名去获取对应的状态对象：

const formValid = Object.keys(this.state.form)
  .map(key => this.state.form[key]) // 把键名映射成对应的字段对象
  .filter(field => field.required)
  .every(field => field.filled);