Si j'utilise formik, comment puis-je écrire la valeur correcte dans l'objet imbriqué ?
P粉410239819
P粉410239819 2023-08-17 16:26:31
0
1
489

É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)}
)}
); } ; return <>{fields.map(itemsRender)}; }
P粉410239819
P粉410239819

répondre à tous (1)
P粉046878197

Vous devez mettre à jour l'attributnamevaluepour 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

{Object.entries(item[key]?.fields).map(([nestedFieldName, fieldObj]) => ( 

{fieldObj.title}

{fieldObj.fields && (
{Object.entries(fieldObj.fields).map(itemsRender)}
)}
))}

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

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

codesandbox

    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal
    À propos de nous Clause de non-responsabilité Sitemap
    Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!