

下記サンプルコードで配列にオブジェクトを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が走るイメージです。

[code]

    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: ""}]が出力される
     }
    }
    
[/code]

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

#### サンプルコード2

[code]

     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: ""}]が出力される
     }
    
[/code]


CC BY-SA 4.0
2021-03-25T07:22:22.783
74885
2023-07-06T05:07:51.010
2022-12-19T16:29:00.477
3060
43562
question
reactjs typescript next.js
配列にオブジェクトを追加したい(forEach, push)


自己解決しました。

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

[code]

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


CC BY-SA 4.0
2021-03-25T08:30:42.783
74888
2021-03-25T08:55:12.463
2021-03-25T08:55:12.463
3060
43562
74885
answer