0

下記サンプルコードで配列にオブジェクトをpushしたいのですが思うようにできません。
forEachを使って1度目のループで{text: "aaa", imagePath: ""}をarryにpushして、
2度目のループで{text: "bbb", imagePath: "", link: ""}をarryにpushしているつもりなのですが、なぜか最後のconsole.log(array)[{text: "", imagePath: ""},{text: "", imagePath: ""]が出力されます。

[{text: "aaa", imagePath: ""},{text: "bbb", imagePath: ""]が出力されてほしいです。
どうしたら目的の値を出力できるでしょうか。

forEach, pushの使い方の問題なのかreactの挙動的な問題なのかもよくわからないので、
わかる方いらっしゃいましたら教えて頂きたいです。


サンプルコード

レンダー部分を端折ってますが、onClickイベントがあったときにhandleClickが走るイメージです。

interface Description {
  text: string;
  imagePath: string;
}

const sample: React.FC = ()=> {
 const test = React.useRef<Array<string>>();
 const description = React.useRef<Description>();

 handleClick = () => {
  text.current = ["aaa",bbb"];
  const array: Array<Description> = [];

  test.current.forEach(function(value, key) {
   description.current.text = value;
   console.log(description.current); // 1ループ目は{text: "aaa", imagePath: ""}で2ループ目は{text: "bbb", imagePath: ""}が出力される
   array.push(description.current);
  }

  console.log(array); / [{text: "", imagePath: ""},{text: "", imagePath: ""}]が出力される
 }
}

ちなみにforEachを使わずにやってみたところ(サンプルコード2)
[{text: "aaa", imagePath: ""},{text: "bbb", imagePath: ""]が出力されました。
また、サンプルにはありませんがpushのところをarray[index] = description.currentでもやってみましたが結果は同じでした。

サンプルコード2

 handleClick = () => {
  text.current = ["aaa",bbb"];
  const array: Array<Description> = [];

   description.current.text = test.current[0];
  console.log(description.current); // {text: "aaa", imagePath: ""}が出力される
   array.push(description.current);

   description.current.text = test.current[1];
   console.log(description.current); // {text: "bbb", imagePath: ""}が出力される
   array.push(description.current);

  console.log(array); // [{text: "bbb", imagePath: ""},{text: "bbb", imagePath: ""}]が出力される
 }

1 件の回答 1

1

自己解決しました。

pushする前にオブジェクトを作り直せばいけました。
ただ、なぜ作り直さなきゃいけないのかわからないので、もしご存知の方いらっしゃいましたら教えて頂けるとありがたいです。

const data = Object.assign({}, description.current);
array.push(data);

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。