在 React 中单击按钮将元素从一个数组推送到另一个数组？

Question

我正在尝试使用 .contact() 方法将我的 old_array 中的元素推送到我的 new_array。我在数组中的每个元素上都有一个按钮，如下所示：

´´´

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

´´´

所以你可以看到每个元素都有一个单独的 ID。现在我想单击按钮将该元素推送到一个新数组。（我从 API 获取数据，我将 .map() 放入我的 old_array 中）我的函数如下所示：

´´´

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})

}

´´´

这是我想要输出的地方：

´´´

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

´´´

Answer 1

第一个：

在你的问题中，你到处都在使用contact()，我认为JS中没有数组这样的功能:)，应该是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>
    ))
}

在 React 中单击按钮将元素从一个数组推送到另一个数组？

push element from one array to another on button click in React?

javascript

arrays

higher-order-functions

reactjs