質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

1回答

526閲覧

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

jud

総合スコア3

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2023/04/05 11:54

実現したいこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

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

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

投稿2023/04/05 12:11

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jud

2023/04/05 13:36

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

2023/04/05 13:48

<input type="hidden">を使うという方法自体が妥当ではありません。直接userの値を使ってください。
jud

2023/04/06 08:35

maisumakun様、 お時間頂きまして感謝いたします。{user.id}を関数handleChangeへ渡そうと様々試しておりますが、行き詰っております。どのような記述になるか、何か良い事例、記述のアイデア等お教え頂けませんでしょうか?
maisumakun

2023/04/06 08:37

> {user.id}を関数handleChangeへ渡そうと様々試しておりますが なぜhandleChangeで処理しなければならないのでしょうか?handleSubmitで送信する値を作ればいいだけのようにも思えます。
jud

2023/04/10 02:49

お時間頂きまして感謝いたします。{user.id}はreturn内でしか生成できませんよね?どの様にhandleSubmit内で送信する値を作るかお教えいただけませんでしょうか?
maisumakun

2023/04/10 04:42

> {user.id}はreturn内でしか生成できませんよね? そんな事はありません。usersから取ってきてください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問