【React/Formik】setFieldValueの使い方

※本サイトにはプロモーション・広告が含まれています。

(最終更新月:2021年7月)

フロントエンドをReact、バックエンドをDjangoのWebアプリで、formikを使用してます。

「formikでアップデートビューを作りたい!」

「setFieldValueの使い方が知りたい!」

という方へ向けて、

formikで動的に初期値を入力する方法

を解説します。

筆者プロフィール

筆者プロフィールアイコン

【現職】プロダクトマネージャー

【副業】ブログ(月間20万PV)/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

  • 見るからにきれいなコードの書き方
  • コードの分割方法
  • 変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

formikでvalueを変更する「setFieldValue」

<Formik>タグ内で{ }で囲った関数を記述

返り値を子要素として<Formik>内に反映させることができます

<Formik>
    {() => {
        return (
                <返す値>
                )
    }
</Formik>

この関数を使用することで、Formikに用意された様々な関数などを受け取ることができます

その中で、setFieldValueというフォーム内の値を書き換える関数を受け取りましょう

<Formik>
    {(setFieldValue) => {
        return (
                <返す値>
                )
    }
</Formik>

setFieldValueを使い、apiから受け取った値をフォームへ入力しましょう

ポイントは、useEffect関数内でsetFieldValueを使うこと!

{({setFieldValue})=>{
      useEffect(() => {
         <データを受け取りobjという変数へ格納>
             setFieldValue("title", obj.title, false)
             setFieldValue("content", obj.content, false)
             setFieldValue("public", obj.public, false)
    },[])
       return (
         ....
     )

setFieldValueの書き方は、

setFieldValue(値のフィールド名、値、バリデーションチェック)

(※詳しくは公式ドキュメントをご覧ください)

コード例

関係ありそうな部分を抜粋してご紹介します↓

....
const slug = props.match.params.slug
....

return (
        <Formik 
            ....
        >
            {({values, setFieldValue})=>{
                useEffect(() => {
                    if (slug !== undefined) {
                        fetch(`/nippoApp/api/${slug}/`, getLookupOptions)
                            .then(res => {
                                return res.json()
                            })
                            .then(obj => {
                                setFieldValue("title", obj.title, false)
                                setFieldValue("content", obj.content, false)
                                setFieldValue("public", obj.public, false)
                            })
                        }
                },[])
                return (
                     ....
     )
         </Fromik>
)

まとめ

言葉で簡単にまとめると、

  • <Formik>子要素としての関数をしようすること
  • 引数として、setFieldValueを受け取り、
  • useEffect内に記述する

となります。

最後までご覧頂きありがとうございました!!!

タイトルとURLをコピーしました