如果我使用formik，如何在嵌套对象中写入正确的值？

Question

给定一个与表单对象中的字段名称匹配的字段数组，我试图编写一个嵌套值，但由于某种原因，formik不知道如何编写嵌套值，这仅适用于顶层的值

我会在评论中留下codesandbox的链接

export default function App() {
  const form = useFormik({
    initialValues: {
      name: "",
      login: "",
      about: {
        age: "",
        rank: "",
        car: {
          name: "",
          years: ""
        }
      }
    }
  });

  const fields = [
    {
      name: { title: "Your name", fields: {} },
      login: { title: "Your login", fields: {} },
      about: {
        title: "About",
        fields: {
          age: { title: "Your age", fields: {} },
          rank: { title: "Your rank", fields: {} },
          car: {
            title: "Your car",
            fields: {
              name: { title: "Car name", fields: {} },
              years: { title: "Car years", fields: {} }
            }
          }
        }
      }
    }
  ];
  const { values, handleChange } = form;

  console.log("VALUES", values);

  const itemsRender = (item, idx) => {
    const key = Object.keys(item).at(-1);
    return (
      <div key={idx}>
        <p>{item[key]?.title}</p>
        <input
          name={key}
          value={values[key]}
          onChange={handleChange}
          placeholder={item[key].title}
        />

        {!isEmpty(item[key]?.fields) && (
          <div style={{ marginLeft: 20 }}>
            {Object.entries(item[key]?.fields).map(itemsRender)}
          </div>
        )}
      </div>
    );
  };

  return <>{fields.map(itemsRender)}</>;
}

Answer 1

您需要更新name和value属性，以包含嵌套字段的完整路径

<input
  name={`${key}.${nestedFieldName}`} // 包含嵌套字段的路径
  value={getIn(values, `${key}.${nestedFieldName}`)} // 使用formik的getIn获取嵌套值
  onChange={handleChange}
  placeholder={fieldObj.title}
/>

您的代码只处理了一层嵌套。
对于更深层次的嵌套，您需要递归地渲染和处理嵌套字段

{Object.entries(item[key]?.fields).map(([nestedFieldName, fieldObj]) => (
  <div style={{ marginLeft: 20 }} key={nestedFieldName}>
    <p>{fieldObj.title}</p>
    <input
      name={`${key}.${nestedFieldName}`}
      value={getIn(values, `${key}.${nestedFieldName}`)}
      onChange={handleChange}
      placeholder={fieldObj.title}
    />
    {fieldObj.fields && (
      <div style={{ marginLeft: 20 }}>
        {Object.entries(fieldObj.fields).map(itemsRender)}
      </div>
    )}
  </div>
))}

最后，不要直接使用handleChange处理嵌套字段，而应该使用Formik的setFieldValue来更新嵌套字段的值。
您可以从表单对象中访问setFieldValue：

onChange={(e) => {
  form.setFieldValue(`${key}.${nestedFieldName}`, e.target.value);
}}

codesandbox