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

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

新規登録して質問してみよう
ただいま回答率
85.46%
多次元配列

1次元配列内にさらに配列を格納している配列を、多次元配列と呼びます。

関数

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

保存

保存(save)とは、特定のファイルを、ハードディスク等の外部記憶装置に記録する行為を指します。

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

Q&A

0回答

998閲覧

useStateで特定の配列の値を変更したい

shimon11

総合スコア49

多次元配列

1次元配列内にさらに配列を格納している配列を、多次元配列と呼びます。

関数

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

保存

保存(save)とは、特定のファイルを、ハードディスク等の外部記憶装置に記録する行為を指します。

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

0グッド

0クリップ

投稿2021/09/14 08:55

編集2021/09/14 10:06

useStateで特定の配列の値を変更したいです。。

値が複数存在する入力フォームを作っています
inputの値がonChangeイベントで変更された時にuseStateの更新関数(今回はsetState)で値を保存したいです

その際にitemsの値が配列のためそのidと一致するラベルorデータを変更したいです

react

1const sampleArr = []; 2const [items, setState] = useState(sampleArr); 3 4const sampleInputChange = (id, key, newValue) => { 5 /** 6 * id 変更があったid 7 * key sample_labelsなどのキー 8 * newValue 新しい文字など 9 */ 10 console.log(id); 11 console.log(key); 12 console.log(newValue); 13 /** 14 * useStateで値を変更したい 15 */ 16 // let addValue = { sample_id: id, sample_labels: newValue, sample_data: 1 } 17 // setState([...items, addValue]); 18} 19 20return ( 21 <> 22 {items.map((item) => ( 23 <div key={item.sample_id}> 24 <div className="sample_block_input_area"> 25 <TextControl 26 className="sample_block_input_sample_id" 27 name="sample_id" 28 // type="hidden" 29 value={item.sample_id} 30 /> 31 <TextControl 32 className="sample_block_input_sample_labels" 33 name="sample_labels" 34 value={item.sample_labels} 35 data-control={item.sample_id} 36 onChange={ 37 (newValue) => sampleInputChange(item.sample_id, 'sample_labels', newValue) 38 } 39 /> 40 <TextControl 41 className="sample_block_input_sample_data" 42 name="sample_data" 43 type="number" 44 value={item.sample_data} 45 data-control={item.sample_id} 46 onChange={ 47 (newValue) => sampleInputChange(item.sample_data, 'sample_data', newValue) 48 } 49 /> 50 </div> 51 </div> 52 ))} 53 </> 54);

itemsはconsole.logで表示するとこのような配列になっています

(3)[{… }, {… }, {… }] 0: { sample_id: 0, sample_labels: 'English', sample_data: 300 } 1: { sample_id: 1, sample_labels: 'Spanish', sample_data: 50 } 2: { sample_id: 2, sample_labels: 'French', sample_data: 50 }

試したこと

if ( key == sample_labels ) { let addValue = { sample_id: id, sample_labels: newValue } } if ( key == sample_data ) { let addValue = { sample_id: id, sample_data: newValue } } items.map(item => (item.sample_id === id ? setState(addValue) : item))

これでは保存されないです

お心優しい方アドバイスいただきたいです

よろしくおねがいします。

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

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

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

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

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

maisumakun

2021/09/14 09:40

書いてみてうまくいかなかったコードなどはありませんか?
shimon11

2021/09/14 10:06

回答ありがとうございます 試したことを追記しました。 回答いただければ幸いです
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

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

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

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問