react4 backendとの通信(hook)

はじめに

nodeにuser情報を検索するapiとuser情報を登録するapiがある。
そこにreactからrequestをかけてresponseをもらう。
フロント(react)をメインにバック(express)も少し最後に載せる。

フロント

フロントコード(POST)

import { useState } from "react"; 
const UserCreate = () => { 
    const URL = "http://localhost:8080/post" 
    const [userData, setUserData] = useState({ 
        username: "", 
        email: "", 
        password:"" 
    })  
    const getUserData = (data) => { 
        const { name, value } = data.target 
        setUserData({ ...userData, [name]: value }) 
        console.log(data.target) 
        console.log(userData) 
    } 
    const requestOptions ={ 
        method: 'POST', 
        headers:{'Content-Type': 'application/json'}, 
        body: JSON.stringify(userData) 
    } 
    const postData = () => { 
        fetch(URL,requestOptions) 
            .then(() => { 
            console.log("success") 
            }) 
            .catch((error) => { 
            console.error(error) 
            }) 
         
    } 
    return ( 
        <div> 
            <form onSubmit={postData}> 
                <div> 
                    <label> 
                        名前: 
                        <input type="text" name='username' onChange={getUserData} value={userData.name} /> 
                    </label> 
                </div> 
                <div> 
                    <label> 
                        メール: 
                        <input type="text" name='email' onChange={getUserData} value={userData.email} /> 
                    </label> 
                </div> 
                <div> 
                    <label> 
                        パスワード: 
                        <input type="text" name='password' onChange={getUserData} value={userData.password} /> 
                    </label> 
                </div> 
                <input type="submit" value="送信" /> 
            </form> 
        </div>
    ) 
} 
export default UserCreate

解説

useStateで状態をコンポーネントに保存。
配列で書かれていて、インデックス０に状態の変数名(userData)、インデックス１に状態を変化させる更新関数名(setUserData)を書く。
更新関数を直接呼ぶのは良くないので状態変数を変化させる更新関数を呼ぶための関数を作る。(getUserData)
この例では状態変数を３つ用意していてそれを連想配列(辞書型)でまとめている。

処理の流れ

①送信ボタンを押すとonSubmitからpostData関数を呼び出す
②fetch関数で非同期処理

getUserData関数内の説明

①textフォームに何か書き込むとonChangeが働き、getUserData関数が呼び出される。
そしてその情報（data）のtargetをnameとvalueに当たる部分を取り出している。
オブジェクトの分解という↓
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#object_destructuring

dataの中身↓

targetの中身↓

{ name, value }の値↓

②

setUserData({ ...userData, [name]: value })

これはオブジェクト{}の中に[]がある。
なんだこれ？
調べよう。
要は...userDataが→{name:"",email:"adf",password:""}
のとき、その中の[name]がemailとなり、その値adfが代入される。そしてemailの値がマージされる。

{       username: "", 
        email: "", 
        password:""
}

↓これがこう

{
        username: "", 
        email: "", 
        password:"",
        email:"adf"
}

↓これがこう

{
        username: "", 
        email: "adf", 
        password:""
}

https://medium.com/@bretdoucette/understanding-this-setstate-name-value-a5ef7b4ea2b4
https://qiita.com/TakanoriOkawa/items/7de0b158afa17ef2dae8

③...userDataとはスプレッド構文。配列やオブジェクトの要素を展開する。
https://qiita.com/akisx/items/682a4283c13fe336c547

中身↓

requestOptionsはfetchに引数として与える、post送信の条件を書いている。
https://cpoint-lab.co.jp/article/201909/11409/

バックエンド

バックエンド

const express = require("express") 
const router = express.Router() 
const db = require("../models/") 
router.post("/", (req, res, next) => { 
    db.User.create({ 
        name: req.body.name, 
        email: req.body.email, 
        password: req.body.password, 
    }) 
    console.log(req.body) 
}) 
module.exports = router

dbのname,email,passwordカラムにrequestで入ってきた値のbodyの中のそれぞれのkeyに対応するvalueを保存している。

今後

ここにvalidationをこれから付け加えていく。
フロントにも付け加えていったほうがいいのかね？
初めてで面白そう。