web-dev-qa-db-fra.com

Comment mettre à jour l'état du tableau dans réagit natif?

J'essaie de mettre à jour un seul élément dans un état de tableau, mais je ne suis pas sûr de la façon de le faire.

Etat 

constructor(props) {
    super(props);
    this.state = {
        markers: [],
    };
}

Réglage de l'état 

 setCurrentLocation() {
    var root = this;
    root.setState({
        markers: [
            ...root.state.markers,
            {
                coordinate: {
                    latitude: parseFloat(root.state.currentLat),
                    longitude: parseFloat(root.state.currentLon)
                },
                key: root.state.currentLat,
                image: pinCurrentLocation

            },
        ],
    });
}

Si je veux changer la clé dans le quatrième élément du marqueur, comment puis-je le faire?

Merci

reactjsreact-native
14
John

Le point important est que nous ne devrions pas modifier directement le tableau d’état, toujours effectuer les modifications dans le nouveau tableau, puis utiliser setState pour mettre à jour la valeur de l’état. 

Comme suggéré par Doc:

Ne modifiez jamais cet.État directement, traitez cet.État comme s'il s'agissait de immuable.

Le flux de base de la mise à jour d'un tableau d'états est le suivant:

1- Créez d'abord la copie du tableau d'état.

2- Trouver l'index de l'élément (si un index est disponible, ignorez celui-ci).

3- Met à jour la valeur de item à cet index.

4- Utilisez setState pour mettre à jour la valeur d'état.

Plusieurs solutions sont possibles:

1- Utilisez array.map et vérifiez quel élément vous souhaitez mettre à jour, lorsque vous trouvez que cet élément renvoie un nouvel objet avec la valeur de clé mise à jour, sinon, renvoyez simplement le même objet. Comme ça:

let newMarkers = markers.map(el => (
      el.name==='name'? {...el, key: value}: el
))
this.setState({ markers });

2- Nous pouvons également utiliser array.findIndex pour rechercher l'index de cet élément particulier, puis mettre à jour les valeurs de cet élément. Comme ça:

let markers = [...this.state.markers];
let index = markers.findIndex(el => el.name === 'name');
markers[index] = {...markers[index], key: value};
this.setState({ markers });

La boucle ne sera pas nécessaire si nous connaissons l'index de l'article, nous pouvons directement écrire:

let markers = [ ...this.state.markers ];
markers[index] = {...markers[index], key: value};
this.setState({ markers });
31
Mayank Shukla

Essayez ceci en utilisant la fonction create

onEditComparatorClicked(i) {
   let editableComparatorIndexes = [...this.state.markers];
   editableComparatorIndexes[i] = 1;
   this.setState({editableComparatorIndexes});
}
0
Sujal Patel