温馨提示×

react怎么修改state中的数组

小亿
144
2023-09-13 00:20:28
栏目: 编程语言

要修改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中的数组。

0