下記サンプルコードで配列にオブジェクトを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: ""}]が出力される
}