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

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

新規登録して質問してみよう
ただいま回答率
86.02%
Gutenberg(エディタ)

Gutenbergとは、WordPressに導入されているエディタです。

多次元配列

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

保存

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

配列

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

React.js

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

Q&A

受付中

配列になっている特定の箇所をsetAttributesで変更保存したい

shimon11
shimon11

総合スコア45

Gutenberg(エディタ)

Gutenbergとは、WordPressに導入されているエディタです。

多次元配列

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

保存

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

配列

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

React.js

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

1回答

0グッド

0クリップ

598閲覧

投稿2021/09/12 12:09

編集2021/09/13 04:10

配列の特定の箇所をsetAttributesで変更保存したいです。。

react

1const sampleInputChange = (newValue) => { 2 setAttributes({ 3 sample_labels: newValue 4 }) 5} 6return ( 7 <> 8 {items.map((item) => ( 9 <div key={item.sample_id}> 10 <div className="input_area"> 11 <TextControl 12 className="input_sample_id" 13 name="sample_id" 14 type="hidden" 15 value={item.sample_id} 16 onChange={(newValue) => sampleInputChange(newValue)} 17 /> 18 <TextControl 19 className="input_sample_labels" 20 name="sample_labels" 21 value={item.sample_labels} 22 data-control={item.sample_id} 23 onChange={(newValue) => sampleInputChange(newValue)} 24 /> 25 <TextControl 26 className="input_sample_data" 27 name="sample_data" 28 type="number" 29 value={item.sample_data} 30 data-control={item.sample_id} 31 onChange={(sample_data) => sampleInputChange(sample_data)} 32 /> 33 </div> 34 </div> 35 ))} 36 </> 37);

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 }

items.mapで表示させつつ変更があった値をAttributesで保存したいです。

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

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

hoshi-takanori

2021/09/12 20:04

sampleInputChange には引数として items 配列のどの要素かを表す id または index と、変更する値のキー (sample_id:, sample_labels, sample_data のどれか) が必要だと思います。 そして、sample_id がユーザー入力可能ってことは、値が重複したらどうするか考える必要がありますね。
shimon11

2021/09/12 23:13

ありがとうございます。 配列のどの要素かをdata-controlで渡せるとしてら、どの様に変更可能でしょうか? 説明不足で申し訳ないですが、sample_idはユーザー入力可能ではない値です。
hoshi-takanori

2021/09/13 02:42

items の内容を直接更新するなら、data-control とかは使わずに、sampleInputChange を const sampleInputChange = (id, key, newValue) => { setAttributes(items.map(item => (item.sample_id === id ? { ...item, [key]: newValue } : item))); } として、TextControl の onChange で必要な値を渡せば良いかと。 また、sample_id は TextControl で編集可能になってるように見えますが…。 あと、もしかして setAttributes は items を更新するのではなく、変更内容を別途保存する感じでしょうか?
shimon11

2021/09/13 04:14 編集

ありがとうございます。 なるほど試してみます。 > あと、もしかして setAttributes は items を更新するのではなく、変更内容を別途保存する感じでしょうか? こちら、そうです。 表示する値と保存する値は少し違っていてデータを ``` const sampleArr = []; for (var i = 0; i < sample_id.length; i++) { sampleArr.push({ sample_id: sample_id[i], sample_labels: sample_labels[i], sample_data: sample_data[i] }); }; const [items, setState] = useState(sampleArr); ``` として sampleInputChangeで ``` let addValue = { sample_id: sample_id, sample_labels: sample_labels, sample_data: sample_data } setState([...items, addValue]); ``` を使ったら行けるかなと思っていましたがもっと良い書き方ありますでしょうか
hoshi-takanori

2021/09/13 05:41

うーん、ちょっと何がしたいのか分からないですね…。
shimon11

2021/09/13 10:26

hoshi-takanoriさん 何度もスミマセン >items の内容を直接更新するなら、data-control とかは使わずに、sampleInputChange を const sampleInputChange = (id, key, newValue) => { setAttributes(items.map(item => (item.sample_id === id ? { ...item, [key]: newValue } : item))); } として、TextControl の onChange で必要な値を渡せば良いかと。 こちらはonChangeイベントで複数の値を渡すのはどの様にすればよいのでしょうか? 教えていただければ幸いです。
hoshi-takanori

2021/09/13 11:10

例えば sample_labels に対しては onChange={(newValue) => sampleInputChange(item.sample_id, 'sample_labels', newValue)} って感じですね。
shimon11

2021/09/14 08:23

hoshi-takanoriさん ありがとうございます onChangeイベントで複数の値を渡すことはできたのですが以前お答えいただいたsetAttributesの中で特定の配列を変更することができないです setAttributes(items.map(item => (item.sample_id === id ? { ...item, [key]: newValue } : item))); item.sample_id === id が一致するものを[key]: newValueとして変更している気がするのですがなぜでしょうか? 教えていただければ幸いです お願いします

回答1

1

setAttributesは、DOMを変更する関数だと思いますが、itemのsample_labelsの値を更新する関数だとすると。どのようなライブラリを使っているか分からないので、詳しくは回答できないですが自分はどうするか、回答失礼します。

onChangeの際にitemのIdと新しい値を渡す。

js

1onChange={(newValue) => sampleInputChange(newValue, item.sample_id)}

変更があったitemのsample_labelsを更新し。itemsを更新する。

js

1 2const sampleInputChange = (newValue, id) => { 3 items = items.map((i) => { 4 if (i.sample_id === id) { 5 // item の sample_labelを更新する。 6 return i.setAttributes({ 7 sample_labels: newValue, 8 }); 9 } 10 return i; 11 }); 12 // items を更新する。 13}; 14

.mapを使っている場合、配列内の一部の値を変更しても、仮想DOMは更新されないと思います。itemsを更新してください。良い回答になっているか分からないので返信等よろしくお願いします。

投稿2021/09/13 05:24

退会済みユーザー

退会済みユーザー

総合スコア0

shimon11👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

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

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

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

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Gutenberg(エディタ)

Gutenbergとは、WordPressに導入されているエディタです。

多次元配列

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

保存

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

配列

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

React.js

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