Reactで配列内のstateを変更する方法

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の配列に対する変更を実現しています。