React中如何避免手动处理嵌套表单对象的非空值渲染？

我之前处理扁平表单值时，会这么做：

// 表单值
const [values, setValues] = useState({
    field1: "",
    field2: ""
});

// 字段描述
const FIELD_DESCR = {
    field1: "First field description",
    field2: "Second field description"
};

然后在下一页自动渲染非空的表单数据：

{Object.keys(values).map((fieldKey => (
    // 如果字段有值
    values[fieldKey] != "" ? (
        <li>{FIELD_DESCR[fieldKey]}: {values[fieldKey]}</li>
    ) : null
)))} 

但现在表单值变成了深度嵌套结构：

const [values, setValues] = useState({
    field1: "",
    obj1: {
        field2: ""
    },
    obj2: {
        field3: "",
        obj3: {
            field4: "",
            obj4: {
                field5: ""
            }
        }
    }
});

我不想手动逐个判断每个嵌套字段是否非空再渲染，而且我用的是React Hook Form，输入框绑定方式是这样的：

{ ...register("field1") }
{ ...register("obj1.field2") }
{ ...register("obj2.field3") }
{ ...register("obj2.obj3.field4") }

请问怎么实现类似扁平对象的自动处理逻辑？

给你两个可行的方案，都能避免手动写一堆条件判断：

方案1：直接利用React Hook Form的注册路径 #

既然你已经用点分隔的路径（比如obj1.field2）来注册字段，那可以把FIELD_DESCR的键改成对应的路径，然后直接遍历这些路径来取值和渲染：

步骤1：更新字段描述的键 #

const FIELD_DESCR = {
  "field1": "First field description",
  "obj1.field2": "Second field description",
  "obj2.field3": "Third field description",
  "obj2.obj3.field4": "Fourth field description",
  "obj2.obj3.obj4.field5": "Fifth field description"
};

步骤2：遍历路径并渲染非空值 #

import { useForm } from "react-hook-form";

function ResultPage() {
  const { getValues } = useForm();
  const formValues = getValues();

  // 根据路径获取嵌套对象里的值
  const getFieldValue = (obj, path) => {
    return path.split('.').reduce((current, key) => current?.[key], obj);
  };

  return (
    <ul>
      {Object.keys(FIELD_DESCR).map((fieldPath) => {
        const value = getFieldValue(formValues, fieldPath);
        // 只渲染非空值
        if (value !== "") {
          return <li key={fieldPath}>{FIELD_DESCR[fieldPath]}: {value}</li>;
        }
        return null;
      })}
    </ul>
  );
}

这个方案的好处是完全贴合React Hook Form的使用习惯，不需要额外处理对象结构。

方案2：扁平化嵌套的表单值 #

写一个工具函数把嵌套对象转成扁平的键值对（键用点分隔的路径），这样就能复用你之前处理扁平对象的逻辑：

步骤1：实现扁平化工具函数 #

// 把嵌套对象转成扁平结构，键为点分隔的路径
const flattenNestedObject = (obj, parentKey = '') => {
  return Object.keys(obj).reduce((result, key) => {
    const currentKey = parentKey ? `${parentKey}.${key}` : key;
    // 如果是嵌套对象，递归处理
    if (typeof obj[key] === 'object' && obj[key] !== null && !Array.isArray(obj[key])) {
      Object.assign(result, flattenNestedObject(obj[key], currentKey));
    } else {
      result[currentKey] = obj[key];
    }
    return result;
  }, {});
};

步骤2：用扁平对象渲染非空值 #

function ResultPage() {
  const { getValues } = useForm();
  const formValues = getValues();
  const flattenedValues = flattenNestedObject(formValues);

  return (
    <ul>
      {Object.keys(flattenedValues).map((fieldPath) => {
        // 只渲染有描述且非空的值
        if (flattenedValues[fieldPath] !== "" && FIELD_DESCR[fieldPath]) {
          return <li key={fieldPath}>{FIELD_DESCR[fieldPath]}: {flattenedValues[fieldPath]}</li>;
        }
        return null;
      })}
    </ul>
  );
}

这个方案更通用，就算不用React Hook Form也能处理嵌套对象的渲染需求。

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