【React/Formik】setFieldValueの使い方

（最終更新月：2021年7月）

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

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

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

という方へ向けて、

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

を解説します。

筆者プロフィール

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

【副業】ブログ（月間17万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

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

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

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

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

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

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

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

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

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

¥2,640 (2024/04/24 14:20:49時点 Amazon調べ-詳細)

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