Si j'utilise formik, comment puis-je écrire la valeur correcte dans l'objet imbriqué ?

Question

Étant donné un tableau de champs qui correspondent aux noms de champs dans l'objet de formulaire, j'essaie d'écrire une valeur imbriquée, mais pour une raison quelconque, Formik ne sait pas comment écrire des valeurs imbriquées, cela ne fonctionne que pour le haut ceux de niveau< ;/p>

Je laisserai un lien vers codesandbox dans les commentaires

exporter la fonction par défaut App() {
  const form = useFormik({
    Valeurs initiales: {
      nom: "",
      se connecter: "",
      à propos de: {
        âge: "",
        rang: "",
        voiture: {
          nom: "",
          années: ""
        }
      }
    }
  });

  champs const = [
    {
      nom : { titre : "Votre nom", champs : {} },
      login : { titre : "Votre login", champs : {} },
      à propos de: {
        titre : "À propos",
        des champs: {
          âge : { titre : "Votre âge", champs : {} },
          rang : { titre : "Votre rang", champs : {} },
          voiture: {
            titre : "Votre voiture",
            des champs: {
              nom : { titre : "Nom de la voiture", champs : {} },
              années : { titre : "Années de voiture", champs : {} }
            }
          }
        }
      }
    }
  ];
  const { valeurs, handleChange } = formulaire ;

  console.log("VALEURS", valeurs);

  const itemsRender = (élément, idx) =>
    clé const = Objet.keys(item).at(-1);
    retour (
      
        
{item[clé]?.title}
        

        {!isEmpty(item[clé]?.fields) &&
          

            {Object.entries(item[clé]?.fields).map(itemsRender)}
          
        )}
      

Answer 1

Vous devez mettre à jour l'attribut name和value pour inclure le chemin complet vers le champ imbriqué

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

Votre code ne gère qu'un seul niveau d'imbrication.
Pour une imbrication plus profonde, vous devez restituer et traiter les champs imbriqués de manière récursive

{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>
))}

Enfin, n'utilisez pas handleChange处理嵌套字段，而应该使用Formik的setFieldValue directement pour mettre à jour la valeur d'un champ imbriqué.
Vous pouvez accéder à setFieldValue depuis l'objet formulaire :

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

codesandbox