（最終更新月：2021年7月）
フロントエンドをReact、バックエンドをDjangoのWebアプリで、formikを使用してます。
「formikでアップデートビューを作りたい！」
「setFieldValueの使い方が知りたい！」
という方へ向けて、
formikで動的に初期値を入力する方法
を解説します。
筆者プロフィール
【現職】プロダクトマネージャー
【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作
「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。
【当ブログで紹介しているサイト】
✔人に見せても恥ずかしくないコードを書こう
「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。
- 見るからにきれいなコードの書き方
- コードの分割方法
- 変数や関数の命名規則
エンジニアのスタンダートとすべき基準を一から解説しています。
何回も読むのに値する本なので、ぜひ手にとって読んでみてください。
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内に記述する
となります。
最後までご覧頂きありがとうございました！！！