実現したいこと
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 コメント