É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)})}
Vous devez mettre à jour l'attribut
name
和value
pour inclure le chemin complet vers le champ imbriqué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
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 :codesandbox