web-dev-qa-db-ja.com

状態の配列に値を追加する最良の方法は何ですか

状態の配列があります。this.state.arrとしましょう。この状態プロパティに何かを追加し、さらにいくつかのプロパティを変更したいと思います。

オプション1

onChange(event){
    this.state.arr.Push('newvalue');
    ...
    this.setState({some:'val',arr:this.state.arr})
}

オプション2

onChange(event){
    var newArr = this.state.arr;
    ...
    newArr.Push('newvalue');
    ...
    this.setState({some:'val',arr:newArr})
}

だから.. this.stateは不変に扱われることになっていることを知っています。しかし、それから状態を設定するオプション1のように使用しても大丈夫ですか、それともオプション2のようなもので行く必要がありますか？したがって、常に最初にメモリにコピーを作成します

memorystatereactjs
47
Flion

Concatを使用する別の簡単な方法：

this.setState({
  arr: this.state.arr.concat('new value')
})
17
TiagoLr

今のところ、これが最良の方法です。

this.setState(previousState => ({
    myArray: [...previousState.myArray, 'new value']
}));
61
Kutsan Kaplan

指定したオプションは両方とも同じです。どちらもメモリ内の同じオブジェクトを指し、同じ配列値を持ちます。ステートオブジェクトは、前述のように不変として扱う必要がありますが、新しいオブジェクトを指すように配列を再作成し、新しいアイテムを設定してから、状態をリセットする必要があります。例：

onChange(event){
    var newArray = this.state.arr.slice();    
    newArray.Push("new value");   
    this.setState({arr:newArray})
}
57
Butters

ES6構文を使用している場合は、 スプレッド演算子 を使用して、新しいアイテムを1つのライナーとして既存の配列に追加できます。

// Append an array
const newArr = [1,2,3,4]
this.setState(prevState => ({
  arr: [...prevState.arr, ...newArr]
}));

// Append a single item
this.setState(prevState => ({
  arr: [...prevState.arr, 'new item']
}));
37
JamieD

今最高の距離。

this.setState({ myArr: [...this.state.myArr, new_value] })
3
Pycc34
onChange() {
     const { arr } = this.state;
     let tempArr = [...arr];
     tempArr.Push('newvalue');
     this.setState({
       arr: tempArr
    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
2
SAMAR
handleValueChange = (value) => {
      let myArr= [...this.state.myArr]
      myArr.Push(value)
      this.setState({
         myArr
     })

これは仕事をするかもしれません。

1
Harshit Singhai

これはあなたの質問に直接答えないかもしれませんが、以下のような状態で来るもののために

 state = {
    currentstate:[
     {
    id: 1 ,
    firstname: 'zinani',
    sex: 'male'

     }
    ]

 }

解決

const new_value = {
    id: 2 ,
    firstname: 'san',
    sex: 'male'

     }

現在の状態を新しい値に置き換えます

 this.setState({ currentState: [...this.state.currentState, new_array] })
0
Excellent Lawrence

私が使用している配列に新しいオブジェクトを追加し続けたい場合：

_methodName = (para1, para2) => {
  this.setState({
    arr: this.state.arr.concat({para1, para2})
  })
}
0
Mygel Bergstresser