reactjsでaxios.getで得た値をaxios.postで他テーブルへ挿入したい。

実現したいこと

reactjsのmapで自動的に抽出した値をDBの他テーブルに送信したいです。

前提

以下の記述は開いたページの記入欄に記入し登録ボタンをクリックすると、その記入情報がサーバー側スクリプトに送信され、そのスクリプトからDBに挿入されます。この開いたページのURLにはパラメータが付随しており、そのパラメータ情報を元にDBからそのパラメータ情報に関するデータを抽出します。下記のaxios.getで得たvalue={user.list_id}をそのままaxios.postで他のテーブルに送信挿入したいのですが、できません。どこに問題があるかお教え頂けませんでしょうか?

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

想定している他テーブルのカラムに値が挿入されない。

該当のソースコード

import { useState, useEffect, React } from "react"; import axios from "axios"; import { useNavigate, useParams } from "react-router-dom"; export default function List() {  const onSubmit = (e) => { e.preventDefault() alert(URL.createObjectURL(selectedImage)) } const removeSelectedImage = () => { setSelectedImage(); }; const navigate = useNavigate(); const [users, setUsers] = useState([]); const [inputs, setInputs] = useState([]);  const {id} = useParams(); useEffect(() => { getUser(); }, []); function getUser() { axios.get(`https://xxxxxx/xxxxx/users/${id}`).then(function(response) { console.log(response.data); setUsers(response.data); }); } const handleChange = (event) => { if (event.target.files && event.target.files.length > 0) { setSelectedImage(event.target.files[0]); } const name = event.target.name; const value = event.target.value; setInputs(values => ({...values, [name]: value})); } const handleSubmit = (event) => { event.preventDefault(); axios.post('https://xxxxx/xxxxx/user/save', inputs).then(function(response){ console.log(response.data); navigate('/'); }); return ( <div> <form onSubmit={handleSubmit}> {Object.values(users).map((user, key) => <input type="hidden" value={user.list_id} name="list_id" onChange={handleChange} /> )}      <input type="text" name="comments" onChange={handleChange} />       <button>登録</button> </form> </div> ) }

試したこと

以下の記述で試すと、ページにインプットボックスが表示され、そこにlist_idをタイプし、登録ボタンを押すと、上記で想定している他テーブルへの値の挿入ができます。

<form onSubmit={handleSubmit}> {Object.values(users).map((user, key) => <input type="text" name="list_id" onChange={handleChange} /> )}      <input type="text" name="comments" onChange={handleChange} />       <button>登録</button> </form>

また、以下の設定にすると、インプットボックスにlist_idが表示されておりますが、登録をしても他テーブルへの値の挿入ができません。

{Object.values(users).map((user, key) => <input type="text" value={user.list_id} name="list_id" onChange={handleChange} /> )}

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

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

コメントを投稿

0 コメント