Je semble avoir des problèmes pour pousser les données dans un tableau d'état. J'essaye d'y parvenir de cette façon:

this.setState({ myArray: this.state.myArray.push('new value') })

Mais je crois que c'est une manière incorrecte et provoque des problèmes de mutabilité?

Array push renvoie la longueur

this.state.myArray.push('new value')renvoie la longueur du tableau étendu, au lieu du tableau lui-même. Array.prototype.push () .

Je suppose que vous vous attendez à ce que la valeur retournée soit le tableau.

Immutabilité

Il semble que ce soit plutôt le comportement de React:

NE JAMAIS muter directement this.state, car l'appel de setState () par la suite peut remplacer la mutation que vous avez effectuée. Traitez cet état comme s'il était immuable. React.Component .

Je suppose que vous le feriez comme ceci (pas familier avec React):

var joined = this.state.myArray.concat('new value');
this.setState({ myArray: joined })

En utilisant es6, cela peut être fait comme ceci:

this.setState({ myArray: [...this.state.myArray, 'new value'] }) //simple value
this.setState({ myArray: [...this.state.myArray, ...[1,2,3] ] }) //another array

Syntaxe de diffusion

Jamais recommandé de muter l'état directement.

L'approche recommandée dans les versions ultérieures de React consiste à utiliser une fonction de mise à jour lors de la modification des états pour éviter les conditions de concurrence:

Poussez la chaîne à la fin du tableau

this.setState(prevState => ({
  myArray: [...prevState.myArray, "new value"]
}))

Pousser la chaîne au début du tableau

this.setState(prevState => ({
  myArray: ["new value", ...prevState.myArray]
}))

Pousser l'objet à la fin du tableau

this.setState(prevState => ({
  myArray: [...prevState.myArray, {"name": "object"}]
}))

Pousser l'objet au début du tableau

this.setState(prevState => ({
  myArray: [ {"name": "object"}, ...prevState.myArray]
}))

Vous ne devriez pas du tout exploiter l'état. Du moins, pas directement. Si vous souhaitez mettre à jour votre tableau, vous voudrez faire quelque chose comme ça.

var newStateArray = this.state.myArray.slice();
newStateArray.push('new value');
this.setState(myArray: newStateArray);

Il n'est pas souhaitable de travailler directement sur l'objet d'état. Vous pouvez également jeter un œil aux assistants d'immuabilité de React.

https://facebook.github.io/react/docs/update.html

Vous pouvez utiliser la .concatméthode pour créer une copie de votre tableau avec de nouvelles données:

this.setState({ myArray: this.state.myArray.concat('new value') })

Mais méfiez-vous du comportement spécial de la .concatméthode lors du passage de tableaux - [1, 2].concat(['foo', 3], 'bar')cela entraînera [1, 2, 'foo', 3, 'bar'].

Ce code fonctionne pour moi:

fetch('http://localhost:8080')
  .then(response => response.json())
  .then(json => {
  this.setState({mystate: this.state.mystate.push.apply(this.state.mystate, json)})
})

React-Native

si vous voulez également que votre interface utilisateur (c.-à-d. ur flatList) soit à jour, utilisez PrevState: dans l'exemple ci-dessous, si l'utilisateur clique sur le bouton, il va ajouter un nouvel objet à la liste (à la fois dans le modèle et dans l'interface utilisateur )

data: ['shopping','reading'] // declared in constructor
onPress={() => {this.setState((prevState, props) => {
return {data: [new obj].concat(prevState.data) };
})}}. 

De la manière suivante, nous pouvons vérifier et mettre à jour les objets

this.setState(prevState => ({
    Chart: this.state.Chart.length !== 0 ? [...prevState.Chart,data[data.length - 1]] : data
}));

Ici, vous ne pouvez pas pousser l'objet vers un tableau d'état comme celui-ci. Vous pouvez pousser comme votre chemin dans un tableau normal. Ici, vous devez définir l'état,

this.setState({ 
     myArray: [...this.state.myArray, 'new value'] 
})

Si vous essayez juste de mettre à jour l'état comme ça

   handleClick() {
        this.setState(
{myprop: this.state.myprop +1}
        })
    }

Considérez cette approche

   handleClick() {
        this.setState(prevState => {
            return {
                count: prevState.count + 1
            }
        })
    }

Fondamentalement, prevState écrit this.state pour nous.