在React中單擊按鈕時將元素從一個數組推送到另一個數組？

Question

我正在嘗試使用 method.contact() 將我的 old_array 中的元素推送到我的 new_array。 我在數組中的每個元素上都有一個按鈕，如下所示：

'''

<li key={i}>
   {{character.name} + "is" + {character.age} + "years old"}
   <button onClick={this.addToNewArray}>Fav</button>
</li>

'''

所以你可以看到每個元素都有一個單獨的 id。 現在我想單擊按鈕將該元素推送到新數組。 （我從 API 獲取 i.map() 到我的 old_array 的數據）我的 function 看起來像這樣：

'''

constructor(props){
        super(props);
        this.state = {
            old_arary: [],
            new_array: []
        }
    }
addToNewArray = () => {
        let new_array = this.state.new_array.contact(this.state.old_array);
        this.setState({ new_array: new_array})

}

'''

這就是我想要我的 output 的地方：

'''

<li>
   {this.state.new_array}
</li>

'''

Answer 1

第一的：

在您的問題中，您到處都在使用contact() ，我認為JS中的數組沒有這樣的function :)，應該是concat()

第二：

您可以將 ES6 用於較低的代碼，如下所示：

let new_array = [...this.state.new_array , ...this.state.old_array];
this.setState({ new_array });

第三：

改變這個

<li>
   {this.state.new_array}
</li>

至：

{
    this.state.new_array.map((obj,index) => (
        <li key={index}>
            {obj.name}
        </li>
    ))
}