Je viens de comprendre comment obtenir et poster des données à la base de données. Les données sont affichées dans une liste lorsque la page rend. Je veux que la liste soit rendue lorsque la saisie du formulaire est soumise. Dès maintenant, je dois actualiser manuellement la page pour que le nouvel élément affiche dans la liste.
J'ai déjà essayé de créer un changement d'état dans la fonction Handlesubmit. Rien ne semble arriver cependant. ci-dessous est le formulaire et le code de liste la liste doit afficher le nouvel élément. sur soumettre automatiquement.
4 Réponses :
Garder à l'esprit que j'ai zéro connaissance pratique de réagir, il me semble que vous devez simplement mettre à jour le Je suppose que votre composant a une sorte de mis à jour: de sorte que la mainledata () a récupéré les données du serveur. Il est appelé dans ComponentDidMount () pour la charge de page initiale. Ensuite, on appelle à nouveau chaque fois que la fonction handlesubmit () est appelée par la forme. Chaque fois que HandleData () est appelé, il renie la liste. this.state.items tableau. LOADITEMS MÉTHODE, je dirais donc que votre alors devrait ressembler à quelque chose de plus comme .then (() => ceci.loaditems ()) < / p>
Vous étiez écris sur cela. Je devais appeler ma fonction de gestion initiale () qui a eu une fonction d'api obtenue. Cette fonction réinitialisez la liste lorsqu'elle a été appelée. J'ai édité votre réponse originale. Voir au dessus.
Cela semble bon. La seule note que j'ai est que si vous ne faites rien avec la réponse du message, ne vous embêtez pas avec .Chen (res => res.json ()) ou si vous le souhaitez. Pour ajouter une sorte de message de type growl, récupérez le JSON dans le résolveur suivant, .Chen ((JSONRESFROMSOST) => this.setstate ({growlmessage: JSONRESFROMSOST.MESSAGE})) .... En outre, vous devriez peut-être .catch le message plus tôt et définir une messagerie d'erreur amicale, suivie en rechargeant de toute façon les données, au cas où certains nouveaux articles sont arrivés d'un autre utilisateur ailleurs
Définissez l'état de votre liste d'éléments après avoir obtenu la réponse. Je suppose que vous supposez que vous obtenez toute la liste en réponse.
handleSubmit(event) {
event.preventDefault();
fetch('http://localhost:5000/api/listitems', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify( {
//ID : this.state.id,
Content: this.state.content,
List_Group: this.state.listgroup,
Date_Added: this.state.date
})
})
.then(res => res.json())
.then(data => this.setState({items : data})
.catch(err => console.log(err));
}
Je pensais donc que l'ensemble nécessaire pour être appelé quelque part sur les articles. J'ai utilisé votre exemple mais maintenant réagir consiste à jeter ces erreurs. On dirait qu'il y a une question qui passe la variable de données à cet état de l'article. TypeError: this.state.items.map n'est pas une fonction typeError: this.state.items.map n'est pas une fonction
@Davidsanders Assurez-vous que les données que vous définissez sur les éléments en tant que état doivent être une matrice.
En fait, je l'ai compris en appelant ma fonction initiale de HandleData () au lieu de l'instate
L'instate est dans la mainledata (), donc je sais à la fin de l'ensemble de l'ensemble, cela provoque une rendu, mais j'avais des problèmes avec le nouveau SetState pour accepter les données correctes dans la matrice. Appeler la maindata () Agian vient de travailler.
Vous devez appeler cela.SetState. Les mises à jour de l'état déclenchent une rérendance.
handleSubmit(event) {
event.preventDefault();
fetch('http://localhost:5000/api/listitems', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify( {
//ID : this.state.id,
Content: this.state.content,
List_Group: this.state.listgroup,
Date_Added: this.state.date
})
})
.then(res => {
// depending on the response you may need to extract the property here
this.setState({
items: res.json(),
});
})
.catch(err => console.log(err));
}
Vous pouvez le faire:
handleSubmit(event) {
event.preventDefault();
fetch('http://localhost:5000/api/listitems', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify( {
//ID : this.state.id,
Content: this.state.content,
List_Group: this.state.listgroup,
Date_Added: this.state.date
})
})
.then(res => res.json())
.then((items) => this.setState({items: items})) // keep in mind that you may have to transform items to appropriate format to display
.catch(err => console.log(err));
}
Où ajoutez-vous un nouvel élément à la liste?
Qu'est-ce que tu reçois en réponse?