web-dev-qa-db-ja.com

setStateを使用して配列に挿入し、jsを反応させるにはどうすればよいですか

特定のインデックスの要素を変更して反応させ、挿入することを探しています。これは私の状態がどのように見えるかです：

this.state = {arr: ['', '', '', '' ]}

私がやりたいのは、このarr[index] = 'random element' js setState構文に反応します。私がやろうとしたことは：

this.setState({ arr[index]: 'random element' })

しかし、失敗しました、ty！

javascriptarraysreactjs
13
alex1997

enter image description here

slice()を使用して現在の状態を複製します。これにより、元の状態はsetState()まで影響を受けません。クローン作成後、クローン作成されたアレイに対して操作を行い、状態に設定します。前の答えは、状態をmutateします。これについて読む here

let a = this.state.arr.slice(); //creates the clone of the state
a[index] = "random element";
this.setState({arr: a});
58
Pranesh Ravi

[〜＃〜] update [〜＃〜]

Object.assign（） 推奨されるように here を使用して、状態のコピーを作成します。

したがって、次のように実行できます。

let new_state = Object.assign({}, this.state); 
let a = new_state.arr;
a[index] = "random element";
this.setState({arr: a});

それが役に立てば幸い。

4
Boky

スプレッド演算子を使用 https://codeburst.io/javascript-es6-the-spread-syntax-f5c35525f754

let newChild = "newChild"

this.setState({
    children: [
        ...this.state.children,
        newChild
    ]
})
2
Aldo Makmur

2つの方法：

  1. concatの使用：

注：配列を変更するため、array Pushメソッドを使用することはできません。アレイをそのまま残すのではなく、変更します。代わりに、状態を更新するために使用される新しい配列を作成する必要があります。

Array concat methodは、新しい配列を作成し、古い配列をそのまま残しますが、そこから新しい配列を返します。

this.state = {
      value: '',
      list: ['a', 'b', 'c'],
    };

this.setState(state => {
const list = state.list.concat(state.value);
return {
        list,
        value: '',
      };
});
  1. ... spread operatorの使用：
this.state = {
      value: '',
      list: ['a', 'b', 'c'],
    };

this.setState(state => {
const list = [...state.list, state.value]; <--insert in end -->``
const list = [state.value, ...state.list]; <--Or insert in start -->
return {
        list,
        value: '',
      };
});

参照： https://www.robinwieruch.de/react-state- array-add-update-remove /

1
Aashutosh Prakash