formik を使用する場合、ネストされたオブジェクトに正しい値を書き込むにはどうすればよいですか?

Question

フォーム オブジェクト内のフィールド名と一致するフィールドの配列を指定して、ネストされた値を書き込もうとしていますが、何らかの理由で、formik はネストされた値の書き込み方法を知りません。これは、最上位の値< ;/p>

コメントに codesandbox へのリンクを残しておきます

デフォルト関数 App() をエクスポート {
  const form = useFormik({
    初期値: {
      名前： ""、
      ログイン： ""、
      について： {
        年： ""、
        ランク: ""、
        車： {
          名前： ""、
          年: ""
        }
      }
    }
  });

  const フィールド = [
    {
      名前: { タイトル: 「あなたの名前」、フィールド: {} }、
      ログイン: { タイトル: 「あなたのログイン」、フィールド: {} }、
      について： {
        タイトル: 「概要」、
        田畑： {
          年齢: { タイトル: 「あなたの年齢」、フィールド: {} }、
          ランク: { タイトル: "あなたのランク"、フィールド: {} }、
          車： {
            タイトル: 「あなたの車」、
            田畑： {
              名前: { タイトル: "車名"、フィールド: {} }、
              年: { タイトル: "車の年"、フィールド: {} }
            }
          }
        }
      }
    }
  ];
  const { 値, handleChange } = フォーム;

  console.log("VALUES", 値);

  const itemsRender = (item, idx) => {
    const key = Object.keys(item).at(-1);
    戻る （
      <div key={idx}>
        <p>{アイテム[キー]?.タイトル}</p>
        <入力
          名前={キー}
          値={値[キー]}
          onChange={ハンドル変更}
          placeholder={アイテム[キー].タイトル}
        />

        {!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 プロパティを更新して、ネストされたフィールド

へのフルパスを含める必要があります。 リーリー

コードは 1 レベルのネストのみを処理します。
より深くネストするには、ネストされたフィールドを再帰的にレンダリングして処理する必要があります。 リーリー

最後に、ネストされたフィールドを直接処理するために

handleChange を使用しないでください。代わりに、Formik の setFieldValue を使用してネストされたフィールドの値を更新します。
setFieldValue にはフォーム オブジェクトからアクセスできます: リーリー

コードサンドボックス