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

Question

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

const sampleInputChange = (newValue) => {
  setAttributes({
    sample_labels: newValue
  })
}
return (
		<>
    {items.map((item) => (
      <div key={item.sample_id}>
        <div className="input_area">
          <TextControl
            className="input_sample_id"
            name="sample_id"
            type="hidden"
            value={item.sample_id}
            onChange={(newValue) => sampleInputChange(newValue)}
          />
          <TextControl
            className="input_sample_labels"
            name="sample_labels"
            value={item.sample_labels}
            data-control={item.sample_id}
            onChange={(newValue) => sampleInputChange(newValue)}
          />
          <TextControl
            className="input_sample_data"
            name="sample_data"
            type="number"
            value={item.sample_data}
            data-control={item.sample_id}
            onChange={(sample_data) => sampleInputChange(sample_data)}
          />
        </div>
      </div>
    ))}
  </>
);

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で保存したいです。

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

Comments

[hoshi-takanori]

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

[shimon11]

ありがとうございます。
配列のどの要素かをdata-controlで渡せるとしてら、どの様に変更可能でしょうか？

説明不足で申し訳ないですが、sample_idはユーザー入力可能ではない値です。

[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 で必要な値を渡せば良いかと。

また、sample_id は TextControl で編集可能になってるように見えますが…。
あと、もしかして setAttributes は items を更新するのではなく、変更内容を別途保存する感じでしょうか？

[shimon11]

ありがとうございます。
なるほど試してみます。

> あと、もしかして 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]

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

[shimon11]

情報不足ですみません
質問を作り直したのでもし可能でしたらアドバイス頂きたいです。。
https://teratail.com/questions/359236?modal=q-comp

[shimon11]

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]

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

[shimon11]

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

item.sample_id === id が一致するものを[key]: newValueとして変更している気がするのですがなぜでしょうか？
教えていただければ幸いです
お願いします

Answer 1

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

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

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

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

const sampleInputChange = (newValue, id) => {
  items = items.map((i) => {
    if (i.sample_id === id) {
      // item の sample_labelを更新する。
      return i.setAttributes({
        sample_labels: newValue,
      });
    }
    return i;
  });
  // items を更新する。
};

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

Comments

[shimon11]

回答ありがとうございます
質問が情報不足だと思ったので作り直しました
お手数ですが回答頂けると幸いです。。
https://teratail.com/questions/359236?modal=q-comp