如何通过modified的key访问React Final Form中的嵌套数组类型表单值？

你遇到的核心问题是modified存储的是点分隔的嵌套字段路径，无法直接通过对象方括号语法取值，我们可以先把路径拆分为层级片段，逐层访问取值。

方法1：自定义嵌套路径取值函数 #

自己实现轻量的路径解析工具，无需额外依赖：

// 嵌套路径取值工具函数
function getNestedValue(obj, path) {
  // 把路径按.分割为层级数组，比如'answers.0.icon'拆成['answers', '0', 'icon']
  const pathSegments = path.split('.');
  // 逐层取值，遇到空值就提前返回
  return pathSegments.reduce((current, segment) => {
    return current?.[segment];
  }, obj);
}

修改后的原有判断逻辑：

if (modified) {
  return (
    Object.keys(modified).filter(
      (modifiedItem) => {
        if (!modified[modifiedItem]) return false;
        // 按路径取对应字段值
        const fieldValue = getNestedValue(values, modifiedItem);
        return fieldValue?.length > 0;
      }
    ).length > 0
  )
}

方法2：使用已有工具库简化实现 #

如果项目中已经引入了常用工具/组件库，可以直接调用成熟的路径取值API，不用自行维护工具函数：

• 引入了Lodash的场景，直接调用_.get(values, modifiedItem)即可，和上面自定义函数效果完全一致
• 使用Ant Design、Element UI等组件库表单的场景，可以直接调用表单实例的getFieldValue方法，比如form.getFieldValue(modifiedItem)，这类表单API本身就原生支持点分隔的嵌套路径、数组索引格式的字段名。

可选优化建议 #

原来的length>0判断只适用于字符串、数组类型的值，如果你的表单存在数字、布尔值等类型的字段，可以调整非空判断逻辑，避免漏判：

// 更通用的非空判断
return fieldValue != null && fieldValue !== '' && (Array.isArray(fieldValue) ? fieldValue.length > 0 : true);

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