Réponses:
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.
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 })
setState()
file d'attente les modifications de l'état du composant et indique à React que ce composant et ses enfants doivent être rendus avec l'état mis à jour. Donc, je suppose que ce n'est tout simplement pas mis à jour à ce moment-là juste après l'avoir configuré. Pourriez-vous s'il vous plaît poster un exemple de code, où nous pouvons voir quel point vous définissez et enregistrez-le, s'il vous plaît?
.concat('new value');
devrait être .concat(['new value']);
concat()
méthode. Voir: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/... ( Tableaux et / ou valeurs à concaténer dans un nouveau tableau. )
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
this.props
et this.state
peut être mis à jour de manière asynchrone, vous ne devez pas vous fier à leurs valeurs pour calculer l'état suivant." Dans le cas de la modification d'un tableau, puisque le tableau existe déjà en tant que propriété de this.state
et que vous devez référencer sa valeur pour définir une nouvelle valeur, vous devez utiliser la forme de setState()
qui accepte une fonction avec l'état précédent comme argument. Exemple: this.setState(prevState => ({ myArray: [...this.state.myArray, 'new value'] }));
Voir: reactjs.org/docs/…
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]
}))
this.setState((prevState) => ({ myArray: [values, ...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.
.slice()
pour créer un nouveau tableau et préserver l'immutabilité. Merci pour l'aide.
Vous pouvez utiliser la .concat
mé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 .concat
mé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)})
})
fetch(`api.openweathermap.org/data/2.5/forecast?q=${this.searchBox.value + KEY} `) .then( response => response.json() ) .then( data => { this.setState({ reports: this.state.reports.push.apply(this.state.reports, data.list)}); });
this.state = { reports=[] }
... pls j'aimerai savoir ce que je fais de mal
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.
console.log(this.state.myArray)
c'est toujours un derrière. Une idée pourquoi?