Wie kann ich bei Verwendung von formik den korrekten Wert in das verschachtelte Objekt schreiben?

Question

Angesichts einer Reihe von Feldern, die mit den Feldnamen im Formularobjekt übereinstimmen, versuche ich, einen verschachtelten Wert zu schreiben, aber aus irgendeinem Grund weiß Formik nicht, wie man verschachtelte Werte schreibt. Dies funktioniert nur für den oberen Bereich Level Ones< ;/p>

Ich werde in den Kommentaren einen Link zu codesandbox hinterlassen

Standardfunktion App() exportieren {
  const form = useFormik({
    Anfangswerte: {
      Name: "",
      Anmeldung: "",
      um: {
        Alter: "",
        Rang: "",
        Auto: {
          Name: "",
          Jahre: ""
        }
      }
    }
  });

  const-Felder = [
    {
      Name: { Titel: „Ihr Name“, Felder: {} },
      Login: { Titel: „Ihr Login“, Felder: {} },
      um: {
        Titel: „Über“,
        Felder: {
          Alter: { Titel: „Ihr Alter“, Felder: {} },
          Rang: { Titel: „Ihr Rang“, Felder: {} },
          Auto: {
            Titel: „Dein Auto“,
            Felder: {
              name: { title: "Autoname", Felder: {} },
              Jahre: { Titel: "Autojahre", Felder: {} }
            }
          }
        }
      }
    }
  ];
  const { Werte, handleChange } = form;

  console.log("VALUES", Werte);

  const itemsRender = (item, idx) =>
    const key = Object.keys(item).at(-1);
    zurückkehren (
      <div key={idx}>
        <p>{item[key]?.title}</p>
        <Eingabe
          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