在React中向数组添加元素的方法与JavaS
cr
i
pt
语言本身的方法基本相同。可以使用push()、concat()、spread operator(...)等方式实现。
方法一:push()
可以使用push()方法向数组末尾添加一个元素。
例如,以下代码向一个名为“items”的数组添加一个字符串元素:
this.state = {
items: ["item1", "item2"]
addItem = () => {
const newItem = "item3";
const items = this.state.items;
items.push(newItem);
this.setState({ items: items });
render() {
return (
<button onClick={this.addItem}>添加元素</button>
{this.state.items.map(item => (
<li key={item}>{item}</li>
方法二:concat()
可以使用concat()方法将一个或多个元素添加到一个数组中。以下是一个示例:
this.state = {
items: ["item1", "item2"]
addItem = () => {
const newItem = "item3";
const items = this.state.items.concat(newItem);
this.setState({ items: items });
render() {
return (
<button onClick={this.addItem}>添加元素</button>
{this.state.items.map(item => (
<li key={item}>{item}</li>
方法三:spread operator(...)
可以使用spread operator(...)将一个或多个元素添加到数组中。以下是一个示例:
this.state = {
items: ["item1", "item2"]
addItem = () => {
const newItem = "item3";
const items = [...this.state.items, newItem];
this.setState({ items: items });
render() {
return (
<button onClick={this.addItem}>添加元素</button>
{this.state.items.map(item => (
<li key={item}>{item}</li>