【React/Formik】setFieldValueの使い方

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

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

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

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

という方へ向けて、

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

を解説します。

運営者プロフィール

現在はIT企業のプロダクトマネージャーとして、個人向け/社内向けシステムなど、複数のシステム開発・運営に携わっています。

Webサイト構築やECサイトの開発経験に加えて、PythonなどのプログラミングやSalesforceなどのクラウドアプリケーションに関する幅広い知識・経験を活かして「プログラミング初心者がスムーズに学べるサイト」を目指しています。

Githubでは、趣味で作成したアプリなどを公開しています。

https://github.com/Yulikepython/

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

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

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

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

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

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

created by Rinker

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