react怎么修改state中的数组

1351
2023/8/16 0:20:28
栏目: 编程语言
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

要修改state中的数组,可以使用setState方法更新state的值。在React中,不应直接修改state中的值,而是应该创建一个新的数组,并将其赋给state。

示例代码如下:

class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
myArray: [1, 2, 3]
};
}
handleClick() {
// 创建一个新的数组,并将其赋给state
this.setState(prevState => ({
myArray: [...prevState.myArray, 4]
}));
}
render() {
return (
<div>
<button onClick={() => this.handleClick()}>添加元素</button>
<ul>
{this.state.myArray.map(item => (
<li key={item}>{item}</li>
))}
</ul>
</div>
);
}
}

在上述示例中,通过点击按钮,会调用handleClick方法,在该方法中创建一个新的数组,并使用扩展运算符...将原数组中的元素展开,再加上要添加的元素,最后将新的数组赋给state中的myArray属性。这样就实现了修改state中的数组。

辰迅云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

推荐阅读: react动态加载组件怎么实现