web-dev-qa-db-fra.com

Comment puis-je insérer dans le tableau avec setState, réagir js

Je cherche à modifier et à tableau dans réagir et insérer des éléments sur un index spécifique. Voici à quoi ressemble mon état:

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

Ce que je veux faire, c'est compiler ce arr[index] = 'random element' pour réagir à la syntaxe js setState. Ce que j'ai essayé de faire, c'est:

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

mais a échoué, ty!

javascriptarraysreactjs
13
alex1997

enter image description here

Clonez l'état actuel à l'aide de slice(). Ce faisant, l'état d'origine reste inchangé jusqu'à setState(). Après le clonage, effectuez vos opérations sur la baie clonée et définissez-la dans l'état. La réponse précédente va muter l'état. Lisez à ce sujet ici

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

[~ # ~] mise à jour [~ # ~]

Utilisez simplement Object.assign () comme suggéré ici pour faire une copie de votre état.

Ainsi, vous pouvez le faire comme suit:

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

J'espère que ça aide.

4
Boky

utiliser l'opérateur d'étalement https://codeburst.io/javascript-es6-the-spread-syntax-f5c35525f754

let newChild = "newChild"

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

Deux façons de faire:

  1. Utilisation de concat :

REMARQUE: Il n'est pas autorisé d'utiliser la méthode array Push, car elle mute le tableau. Il ne laisse pas le tableau intact mais le modifie. Au lieu de cela, il devrait y avoir un nouveau tableau créé qui est utilisé pour mettre à jour l'état.

Array concat method crée un nouveau tableau, en laissant l'ancien tableau intact, mais aussi en renvoyant un nouveau tableau.

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

this.setState(state => {
const list = state.list.concat(state.value);
return {
        list,
        value: '',
      };
});
  1. En utilisant ... l'opérateur spread :
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: '',
      };
});

Référence: https://www.robinwieruch.de/react-state-array-add -update-remove /

1
Aashutosh Prakash