反応質問における「usemutation」の使い方

私は、あなたが私の前のポストを読んだことをかなり確信しています.
それで、「usequery」はデータをフェッチするのに使用されるだけです、しかし、「usemutation」はバックエンドにポスト/プット要求です.
POSTリクエストの機能があるとします.

ユーザAPIで.js

import axios from 'axios'


const api = axios.create({
    baseURL : "https://gorest.co.in/public/v2",
    headers : {'Authorization' : `Bearer ${apiToken}`}
}


export const createUser = (newUser) => api.post("/users",newUser).then(res => res.data);

このCreateUser関数はユーザーオブジェクトを受け取り、Gorest APIに投稿されます.トークンの場合は、Gorestのウェブサイトにサインアップする必要があります.
Gorest APIのプロパティである名前、メール、性別、ステータスを受け取るフォームページを作成しましょう.私は、ちょうどここのUSENTを使っているformdataを取り扱いました.

ユーザフォーム.js

import React, {  useState } from 'react'


function UserForm() {
   const [userData,setUserData ] = useState({
        name : '',
        email : '',
        gender : '',
        status : ''
    })

    const handleFormChange = (e) => {
        setUserData(
            {
                ...userData,
                [e.target.name] : e.target.value
            }
        );
    }

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(userData)

    }

  return (
    <div>
        <form onSubmit={handleSubmit}>
            <div className='field-container'>
            <label htmlFor='name'>Name : </label>
            <input type="text"  name='name' onChange={handleFormChange} value={userData.name}/>
            </div>

            <div className='field-container'>
            <label htmlFor='name'>Email : </label>
            <input type="email"  name='email' onChange={handleFormChange} value={userData.email}/>
            </div>



            <div className='fieldContainer'>
            <label htmlFor='gender'>Gender : </label>
            <input type="radio"  name='gender' onChange={handleFormChange} value='female'/> Female

            <input type="radio"  name='gender' onChange={handleFormChange} value='male'/> Male

            </div>

            <div className='field-container'>
            <label htmlFor='gender'>Status : </label>
            <input type="radio"  name='status' onChange={handleFormChange} value='active'/> Active

            <input type="radio"  name='status' onChange={handleFormChange} value='inactive'/> Inactive

            </div>
            <input type='submit' value={'Submit'} />

        </form>
    </div>
  )
}

export default UserForm

このフォームを送信するには、UserDataオブジェクトをコンソールにしました.次のスクリーンショットの出力を見ることができます.

それで、あなたが機能権利を引き起こす必要があるデータを掲示するために.しかし、どのように我々はそれを使用してusemutationを行う.見ましょう.

import { useMutation } from 'react-query'


const {mutate} = useMutation(createUser);

この突然変異は、必要なときにいつでも引き起こされるべき関数であり、送信するデータ/ペイロードは、このmutate関数にパラメータとして送信すべきです.
したがって、私のhandlesubmit機能は以下のようになります

const handleSubmit = (e) => {
    e.preventDefault();
    mutate(userData);

私がUSequeryで扱うように、あなたはデータを掲示するためにisloadを持つことができます.すべての変更で、私はちょうど私のUIでレスポンスを示しました.コードを見ることができます.

import React, {  useState } from 'react'
import { useMutation } from 'react-query'
import {createUser} from './userApi'

function UserForm() {
    const {mutate, isLoading} = useMutation(createUser, {
        onSuccess : (data) => {
            console.log(data) //This is the response you get back
            setResponse(data)
        }
    })
    const [response,setResponse] = useState({})
    const [userData,setUserData ] = useState({
        name : '',
        email : '',
        gender : '',
        status : ''
    })

    const handleFormChange = (e) => {
        setUserData(
            {
                ...userData,
                [e.target.name] : e.target.value
            }
        );
    }

    const handleSubmit = (e) => {
        e.preventDefault();
        mutate(userData)

    }

  return (
    <div>
        <form onSubmit={handleSubmit}>
            <div className='field-container'>
            <label htmlFor='name'>Name : </label>
            <input type="text"  name='name' onChange={handleFormChange} value={userData.name}/>
            </div>

            <div className='field-container'>
            <label htmlFor='name'>Email : </label>
            <input type="email"  name='email' onChange={handleFormChange} value={userData.email}/>
            </div>



            <div className='fieldContainer'>
            <label htmlFor='gender'>Gender : </label>
            <input type="radio"  name='gender' onChange={handleFormChange} value='female'/> Female

            <input type="radio"  name='gender' onChange={handleFormChange} value='male'/> Male

            </div>

            <div className='field-container'>
            <label htmlFor='gender'>Status : </label>
            <input type="radio"  name='status' onChange={handleFormChange} value='active'/> Active

            <input type="radio"  name='status' onChange={handleFormChange} value='inactive'/> Inactive

            </div>
            <input type='submit' value={'Submit'} />

        </form>
        {isLoading && <div>Posting the data...</div>}
        {Object.keys(response).length > 0 && (<div>
            <h4>Response</h4>
            <p>{response.name}</p>
            <p>{response.email}</p>
        </div>)}
    </div>
  )
}

export default UserForm

出力は、次のスクリーンショットで生成しました.

いくつかの値(put requestを行う)を更新するたびに注意しなければならないいくつかの追加の手順があります.しかし、入門書として、私はちょうど次の話題にそれを任せます.これが役に立つと思います.