reactjsでapiで取得した値の関数への渡し方

実現したいこと

apiであるテーブルから取得した値を関数に渡し、他のapiで他のテーブルに挿入したい。

前提

reactjsでForm等の送信時にinputボックスのonChangeイベント処理により、inputボックスの内容に変更があった時点でその内容を取得し、登録ボタンをクリック後dbに送信する等のケースがありますが、例えば、api経由でdbから抽出した値で変更も加えない値を上述のinputボックスで変更した内容に付随させてdbの他テーブルに送信したい場合、どの様にすれば宜しいかお教え頂けまんでしょうか。

以下の例で言いますと、ユーザーがコメントを書き、登録ボタンをクリックすることにより、コメント、およびaxios.getで自動的に取得した{user.id}の両方をaxios.postにより他のテーブルに送信したいです。

以下の記述ではどの様にvalue={user.id} name="id"をhandleChangeに渡すことができるかお教え頂けまんでしょうか？

発生している問題・エラーメッセージ

試したことに記載したonLoad={handleChange}では値が関数にわたらない。dbに値が挿入されない。

該当のソースコード

import { useState, useEffect, React } from "react";
import axios from "axios";
import { useNavigate, useParams } from "react-router-dom";

export default function List() {

    const navigate = useNavigate();
    const [users, setUsers] = useState([]);
    const [inputs, setInputs] = useState([]);
    const {id} = useParams();

    useEffect(() => {
        getUser();
    }, []);

    function getUser() {        axios.get(`https://xxxxxxxx/api_xxxxxx/users/${id}`).then(function(response) {
            console.log(response.data);
            setUsers(response.data);
        });
    }
    const handleChange = (event) => {        
        const name = event.target.name;
        const value = event.target.value;
        setInputs(values => ({...values, [name]: value}));    
 }
    const handleSubmit = (event) => {
        event.preventDefault();        axios.post(`https://xxxxxxxx/api_xxxxxx/user/save`,inputs).then(function(response){
            console.log(response.data);
            navigate('/');
        });          
    }
     
    return (

<form onSubmit={handleSubmit}>

{Object.values(users).map((user, key) => 	
<input type="hidden" value={user.id} name="id" />
)} 

<textarea type="text" name="comment" onChange={handleChange} />

<button type="submit">登録</button>
</form>
          )
}

試したこと

<input type="hidden" value={user.id} name="id" onLoad={handleChange} />

また以下の記述であれば、inputボックスに値を記入、登録後、値が関数に渡り、dbの所定のテーブルに値が挿入されております。

<input type="text" name="id" onChange={handleChange} />

補足情報（FW/ツールのバージョンなど）

axios@1.3.1
react-dom@18.2.0
react-scripts@5.0.1
react@18.2.0

行動規範の内容に同意します

回答1件

axios.postを行う際に必要なデータを混ぜ込んで下さい。

フォームの送信をevent.preventDefault();で止めている以上、フォームに書き出した<input type="hidden">はただ存在するだけで、何の意味も持ちません。

投稿2023/04/05 12:11

maisumakun

総合スコア146544

jud

2023/04/05 13:36

お時間感謝いたします。具体的にはどのような設定で<input type="hidden" value={user.id} name="id" />の値をhandleChangeへ渡すことができますでしょうか？ <input type="text" name="id" onChange={handleChange} />の手入力では成功いたします。