特定のインデックスの要素を変更して反応させ、挿入することを探しています。これは私の状態がどのように見えるかです:
this.state = {arr: ['', '', '', '' ]}
私がやりたいのは、このarr[index] = 'random element'
js setState構文に反応します。私がやろうとしたことは:
this.setState({ arr[index]: 'random element' })
しかし、失敗しました、ty!
slice()
を使用して現在の状態を複製します。これにより、元の状態はsetState()
まで影響を受けません。クローン作成後、クローン作成されたアレイに対して操作を行い、状態に設定します。前の答えは、状態をmutateします。これについて読む here
let a = this.state.arr.slice(); //creates the clone of the state
a[index] = "random element";
this.setState({arr: a});
[〜#〜] update [〜#〜]
Object.assign() 推奨されるように here を使用して、状態のコピーを作成します。
したがって、次のように実行できます。
let new_state = Object.assign({}, this.state);
let a = new_state.arr;
a[index] = "random element";
this.setState({arr: a});
それが役に立てば幸い。
スプレッド演算子を使用 https://codeburst.io/javascript-es6-the-spread-syntax-f5c35525f754
let newChild = "newChild"
this.setState({
children: [
...this.state.children,
newChild
]
})
2つの方法:
注:配列を変更するため、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: '',
};
});
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 /